DHTML: условная разметка для HTML кода

Стили набора и форматирования

Как авторы обычно оформляют текст при наборе? Например, когда надо какое-то слово сделать курсивным? Результат можно получить разными способами:

1. Нажать мышкой в начале слова и протянуть до конца, щёлкнуть меню "Формат", выбрать "Символ" и там галочкой отметить "Курсив".
2. То же самое, только в первом действии слово выделяет двойной щелчок мышкой, а не "натяжка".
3. Если курсор стоит в конце нужного слова (например, только что набранного), нажать Ctrl+Shift+Left (слово выделится), затем Ctrl+i (курсив).

Такие способы существуют практически во всех современных текстовых редакторах (которые в принципе предполагают форматирование). Три способа перечислены нами в порядке возрастания предпочтения: последний – самый быстрый и «профессиональный», его, как правило, используют “продвинутые” пользователи, чувствующие себя за компьютером наиболее уверенно. Но даже этот последний, лучший способ всё равно прерывает «линейный» процесс набора и существенно замедляет скорость работы автора (или переписчика), печатающего «вслепую».

Идеальным средством является расстановка в процессе набора условных меток вокруг нужных слов – позже эти метки обрабатываются специальной программой, которая может либо сразу отображать текст жирным-курсивом, либо заменяет условные метки на какие-то другие. Для жирного-курсива такая функциональность стала, можно сказать, стандартом в «больших» редакторах – таких, как Openoffice.org, Word. Попробуйте в процессе набора вставить перед словом «звёздочку», а в конце слова – вторую: слово немедленно, прямо на экране станет жирным.

Такие «живые» преобразования, однако, в больших редкторах только жирным-курсивом и ограничиваются. Всё остальное (например, верхний индекс) надо по-прежнему делать с помощью выделения текста и применения к нему соответствующих команд.

Не решает проблему вставка внешних меток при создании сообщений на интернет-форумах: там все метки вставляются щелчком по кнопкам мышкой; ну, даже если и «навесить» на эти команды какие-то клавиши, метки вставляется сразу две – и начальная, и конечная (что-то вроде [B][/B]), и пользователю всё время приходится следить за местом курсора, передвигать его в какой-то момент за пределы меток.

Если быть до конца честным (как положено хорошему исследователю), в больших редакторах можно форматировать текст на ходу, не нарушая линейного процесса набора: набираете текст, щёлкаете Ctrl+B, дальше текст набирается жирным, щёлкаете Ctrl+B, дальше опять обычный текст. Вы как бэ вставляете невидимые метки, которые мгновенно «визуализируются» – что, впрочем, и является первым недостатком такой встроенной системы: она, в первую очередь, ориентирована на внешний вид, а не на логическую разметку.

Мы предлагаем именно логическую разметку, которая потом, преобразованная в HTML код, позволяет через систему стилей (CSS) создавать произвольное оформление. И второй недостаток системы форматирования в больших редакторах – плохая «расширяемость», вы не можете добавить туда произвольные «пользовательские» метки. Мы, например, используем в своей разметке такую метку, как «javscript код»: !J!. Она потом, при визуализации, обрабатывается особым образом с помощью отдельного модуля синтаксической подсветки. Другому пользователю нашей системы предварительной разметки может понадобится добавить метку кода, например, для языка PHP, а потом обрабатывать отмеченные этой меткой фрагменты каким-то своим обработчиком. Это вполне можно сделать, добавив пару строк в файл преобразования разметки format.js. Это, конечно, означает, что наша система предназначена больше всего для программистов, отправляющих сообщения с фрагментами кода на форумы или другие интернет-ресурсы. Или наоборот, для программистов, создающих такие форумы.

Постановка задачи: удобная разметка

В большинстве случаев (даже когда текст набирается в морально устаревшем Ворде, и не программистом, а вовсе каким-нибудь офис-менеджером) конечной целью набора является текст с HTML разметкой: для публикации на сайте или, например, для отправки куда-то в письме (тоже в формате HTML). Публиковать тексты в формате *.doc (и даже обмениваться такими текстами через почту) всё больше становится дурным тоном.

Почему нельзя в процессе набора текста расставлять не какие-то условные метки форматирования, а сразу разметку HTML? Да потому что она ещё больше, чем визуальное форматирование, будет тормозить набор. По нескольким причинам:

1. Надо больше думать, помнить о том, что начальные и конечные тэги HTML разные.
2. HTML тэги могут быть достаточно длинными (например, <strong>), на их набор просто будет уходить много лишнего времени.
3. Даже для максимально коротких тэгов придётся переключать раскладку клавиатуры, что тоже уменьшает скорость.

Таким образом, хорошая условная разметка должна удовлетворять примерно следующим условиям:

• быть понятной (внутренне логичной);
• метки должны быть короткими;
• символы должны быть подобраны так, чтобы их можно было вводить, не переключая раскладку клавиатуры.

А самое главное (предполагаемое по умолчанию) требование – элементы разметки не должны случайно встречаться в тексте. То есть нельзя, например, в качестве метки использовать (курсив) – слово «курсив» в скобках, потому что оно может и так встретиться в тексте (не в качестве специальной метки), и весь текст после него пойдёт наперекосяк; надо обязательно использовать что-нибудь необычное. Необычное, логичное, короткое, и на русской раскладке!

Недолго подумав, мы остановились на восклицательном знаке – решили взять его за основу, ставить в начале всех меток. Восклицательный знак ведь в нормальном, естественном тексте не бывает в начале фразы, перед буквами (а только после букв). Впрочем, в специальных текстах (javascript коде) он может встречаться в очень необычных позициях, но мы это тоже постараемся учесть.

В результате получилась примерно такая система меток:

1. Метки логического выделения слов или групп слов в пределах абзаца: жирный (!*), курсив (!_), подчёркивание (!-) и прочие над-под-индексы. Эти метки ставятся в начале и в конце выделяемого фрагмента. Одинаковые.
2. Метки оформления группы абзацев: списки (!№ – нумерованный, !; – маркированный), код javascript (!J!) и др. Ставятся в начале первого абзаца группы и в конце последнего абзаца. В последнем (!J!) используется переключение раскладки – на первый взгляд, непоследовательно, – так ведь и javascript пишется не по-русски, так что раскладку всё равно переключать.
3. Метки стилей абзаца: !3 – заголовок H3, !! – обычный HTML абзац (элемент P).

Недостатки системы получились следующие: невозможность вложенных списков и неразличение позиций закрывающих-открывающих кавычек. Кавычки, кстати, превращаются в правильные полиграфические, если их просто удваивать (действует и для двойных и для одинарных – апострофов). Где стоят кавычки по отношению к слову, всё равно, – для них просто ищется пара. Поэтому, если одна из пар « будет пропущена, все последующие кавычки »извратятся«.

Гиперссылки

Во многих текстовых и HTML редакторах гиперссылки создаются через «конструктор»: выскакивает новое окно, в котором нужно заполнить несколько полей – адрес ссылки, название, какие-то опциональные элементы. Логика нашей системы требует «линейного» набора гиперссылок, без отвлечения на конструкторы. Примерно как в Википедии (там и другие элементы разметки можно вводить линейно): [[http://dn.ir2.ru/ Веб-технологии]]; мы только удвоили для страховки квадратные скобки. Выглядеть ссылки будут так: Веб-технологии, [[javascript.aspx javascript]] => javascript; никакого серьёзного анализа в преобразовании ссылок не происходит: ищется первый пробел внутри квадратных скобок, до него всё считается URL, после него – текст ссылки. Если текста ссылки нет, вместо него будет подставлен URL: [[javascript.aspx]] => javascript.aspx.

Ну, а код для обработки всей предварительной разметки будет примерно такой:

Обработчик синтаксиса в конце можно не присоединять, если в тексте нет кода javascript. В системе преобразований сделано одно допущение: отсутствуют конечные тэги </p>. Но в предлагаемом способе применения системы это не принципиально.

Инструкция по использованию системы предварительной текстовой разметки:

• создайте текстовый файл с расширением .htm в той же папке, где находится скопированный отсюда файл format.js, если используете синтаксическую подсветку, там же должен быть файл code2.js;
• напечатайте в нём текст, соблюдая правила предложенной разметки;
• допишите в самом конце файла строчку: <script type="text/javascript" src="format.js"></script>;
• откройте получившийся файл в браузере (лучше всего Firefox), посмотрите, что получилось;
• подправьте при необходимости разметку, опять откройте файл в браузере;
• выделите текст, видимый в браузере, щёлкните по нему правой кнопкой мыши, выберите пункт «Исходный код выделенного фрагмента»;
• полученный (видимый на экране) HTML код можно вставлять куда угодно (в письмо, в текст веб-страницы), он будет вполне корректен (Firefox дорисует недостающие закрывающие тэги абзацев, да и другие ошибки исправит).