Тяжелое полиграфическое наследие

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

Первая особенность связана с сущностью интернета и современным ритмом жизни. Если ценность фолианта не в последнюю очередь определяется количеством страниц в нем и объемом текста, то с веб-страницами как раз наоборот. Если страница не является аналогом бумажного издания, да еще раритетного, то чем короче на ней тексты, тем лучше. Дело в том, что восприятие информации при использовании электронных носителей информации существенно отличается от восприятия при использовании аналоговых. Это так называемый «синдром переключения каналов». Когда пульт в руке, очень легко переключаться с одного канала на другой. Когда достаточно щелкнуть по ссылке, очень легко покинуть один сайт и уйти на другой, потом на третий, а в конце просмотреть журнал посещений и ужаснуться, что вы уже на 124-м сайте за 17 минут. Психологически действует такой момент: если в течение нескольких секунд страница не заинтересовала посетителя, то он ее покинет. Вероятно, навсегда, потому что среди нескольких миллиардов веб-страниц всегда будет на чем остановиться. То же самое с телевизионными каналами (правда, их меньше). Отсюда простой вывод: страница должна чем-то привлечь посетителя, иначе зачем она вообще создавалась? Если не внешним видом, то содержимым, текстом. А в этом случае текстовые блоки должны быть лаконичными и понятными с первого прочтения. Понятность относительна (посетители всегда разные по степени подготовки), а вот правило лаконичности всегда должно соблюдаться. Длинные тексты на веб-страницах читать сложно, хотя бы в силу того, что с экрана читать сложнее, чем с бумаги. Лев Николаевич не выдержал бы натиска конкурентов, живи он в эпоху веб-дизайна. Вы думаете, почему японские хокку так популярны среди постоянных обитателей интернета? Потому что они короткие.

Вторая особенность текстов на веб-страницах связана с большим количеством разных параметров устройств вывода. Во-первых, у посетителей разные мониторы. Во-вторых, даже на двух мониторах одинакового размера может быть разное разрешение (сейчас популярны от 800 на 600 точек до 1280 на 1024 точки). В-третьих, даже на одном мониторе с зафиксированным разрешением посетитель может сильно уменьшить окно браузера либо, напротив, развернуть его на полный экран (F11). От всех этих условий очень сильно зависит вид текста. Один и тот же текст может выглядеть то как одна строчка, то как столбец в 10 строк. Во время одной сессии работы с веб-страницей пользователь может изменять окно браузера, отчего текст «ползет», особенно если он сверстан не в колонке жестко заданной ширины. Если на бумаге текст располагается раз и навсегда, то на веб-страницах он очень подвижный. Наконец, даже не изменяя окна браузера, посетитель может воспользоваться функциями увеличения и уменьшения размера текста (есть во всех браузерах) и масштаба отображения веб-страницы (есть во многих современных браузерах). Так что, если текст не «отлит» в виде изображения (так делают некоторые веб-дизайнеры), то он совершенно неподконтролен. Посетитель в большинстве случаев сможет сделать с ним, что хочет. А если сделать из текста изображение, то ведь у посетителя может быть отключена графика в браузере. Бедные, бедные верстальщики, связавшиеся с веб-дизайном! Они вынуждены только уповать на то, что текст сверстан так удачно, что посетитель сайта не захочет проводить все эти манипуляции.

Третья особенность текстов на веб-страницах связана с граниченностью средств форматирования, предоставляемых по умолчанию. Верстальщик-полиграфист использует богатый арсенал приемов и средств, нарабатывавшихся даже не годами, а веками. Он не зависит от многообразия устройств вывода, а просто верстает и спокойно готовит файлы к печати. Язык же HTML изначально разрабатывался скорее как разделяющий фрагменты текста логически, а не визуально. Это производители браузеров назначали тэгам визуальное оформление, чтобы заголовок внешне отличался от основного текста, а цитата — от образца кода. Следующие версии добавили разработчикам немного средств визуального форматирования: текст может быть полужирным, курсив-ным, подчеркнутым и перечеркнутым, раскрашенным в цвета радуги, крупным или мелким, сверстанным благодаря таблицам в несколько колонок; ссылкам можно стало назначать свои цвета. Семантическая ориентированность кода была непоправимо нарушена, но текст стал менее одноликим. Хорошие дизайнеры не злоупотребляли открывшимися возможностями, проявляя вкус, а плохие увечили вид текста и делали его совершенно нечитаемым. Пробираясь сквозь версии браузеров, на сцену вышел язык CSS: он дал намного больше средств форматирования текста, позволив почти не нарушать логику тэгов. Однако хорошая поддержка CSS есть только в современных браузерах, в старых она была реализована очень по-разному. С помощью средств CSS можно реализовать многие из полиграфических особенностей верстки: разные варианты кегля шрифта, стили подчеркивания, начертания, капители, разрядка текста (трекинг), интерлиньяж, разные отступы абзаца, в том числе и отступы красной строки (благодаря чему оформление абзацев можно максимально приблизить к книжному), буквица, разные типы выключки (влево, вправо, от центра, по ширине) и.т.п. Не во всех браузерах это работает одинаково хорошо, но к последним версиям тексты можно верстать уже очень красиво, почти не затрагивая HTML. Однако ряд параметров текста остается за пределами правил HTML и CSS. Среди них:

1. Нестандартные типы выключки: по ширине с последней строкой, выключенной от центра или вправо (обычно при выключке, или выравнивании, по ширине последняя строка абзаца оказывается такой, как если бы она была выключена влево) и по формату (когда все строки выключены одинаково по ширине).

2. Нормальное выравнивание по ширине. Проблема в том, что при такой выключке между словами образуются не очень красивые пробелы разной ширины — переносов ведь нет, и нечему корректировать внешний вид абзаца.

3. Переносы. Их можно реализовать на веб-страницах, но это, во-первых, связано с ручной работой (расстановка спецсимволов — мягких переносов, о которых пойдет речь в следующей главе), а во-вторых, переносы даже в этом случае не будут работать в браузерах на основе Gecko и в Konqueror (браузер Safari, хотя и построен тоже на KHTML, отображает такие символы корректно: только в концах строк, причем сами символы переносов выносятся за правую вертикальную линию набора). Расставлять переносы можно также сценариями: пример такого сценария будет приведен в следующей главе.

4. Висячая пунктуация. Реализуется несколькими способами с помощью тэгов HTML и средств CSS, позволяет выносить за вер-тикальную линию набора целые символы или просто визуально выравнивать вертикальную линию набора.

5. Кавычки и тире. С клавиатуры без дополнительных средств или сочетаний клавиш нельзя ввести правильные виды кавычек (вместо них употребляют знаки дюйма) и тире (вместо которого — дефис). Для полиграфических верстальщиков это никогда не было проблемой, для веб-верстальщиков часто этот факт почему-то встает непреодолимой стеной. В итоге правила для кавычек и тире в книгах одни, а на сайтах другие. То же можно сказать и о других спецсимволах. (Какие же они «спец-», если присутствуют в стандартных наборах символов большинства гарнитур?)

6. Кернинг пар. В основном таблицы шрифтов выглядят достаточно корректно, но в отдельных фрагментах текста то и дело хочется то сдвинуть поближе две буквы, то наоборот, сделать разрядку. Увы, без помощи и стилевых указаний это не реализовать, а с дополнительными тэгами возрастает объем файлов.

7. Вертикальный текст и текст, повернутый на 90 градусов. С помощью фильтров в Internet Explorer это реализовать можно, но этот браузер — не единственный.

8. Автоматически повторяющийся текст. В программах верстки обычно это делается на страницах шаблонов, но в веб-дизайне такого понятия нет. Текст можно включать в стилевые описания параметром content в псевдоэлементах :before и :after, но это, в свою очередь, не будет работать в Internet Explorer. На помощь приходят серверные сценарии.

9. Колонки. Даже если использовать таблицы либо соседствующие блоки, то разбивка на колонки производится вручную. Штатных средств разбивки текста на равномерные колонки в языках разметки нет. Могут выручить только сценарии на стороне сервера или клиента, которые считают количество символов или слов и разбивают текст на относительно равномерные колонки: они должны быть выровнены не только по ширине, но и по высоте. Дело осложняется еще больше, если дизайнер решил сделать колонки разной ширины (например, 1 узкая и 2 широких).

10. Тонкие пробелы — они нужны для разделения знака и номера параграфа, числа и знака процента и промилле и других подобных случаев. В этом случае пробел не разделяет, а скорее объединяет. Спецсимволы для тонких пробелов (которые к тому же являются неразрывными) есть, но они не поддерживаются браузерами. Для отображения таких пробелов можно использовать , которому стилями назначен меньший кегль и меньшее значение трекинга (пробел окажется меньше по размеру, что нам и нужно), но, так как даже неразрывный пробел, оформленный тэгами  , перестает связывать соседние слова, всю конструкцию с тонким пробелом посреди
нужно оформлять еще тэгами … — неоправданное увеличение объема кода.

11. Обтекание текстом непрямоугольных объектов отсутствует в браузерах. Даже если вставляется изображение в форматах GIF или PNG с прозрачными областями по краям, то обтекание текстом происходит по условной прямоугольной границе по периметру изображения. Реализовать можно только версткой вручную наложением частей текста на изображение — относительное или абсолютное позиционирование. Как видно, часть этих недостатков в браузерах можно компенсировать обходными средствами, что, правда, нарушает идеологию языков разметки и раздувает объем кода. Производители браузеров улучшают поддержку специальных символов, но этот процесс идет неравномерно и в разных браузерах по-разному. Например, в Opera 6 не отображался русский знак номера ¹ — вместо него просто появлялся пустой прямоугольник. Уже в седьмой версии ошибка была исправлена. Мягкие переносы не отображаются в браузерах на основе Gecko и в Konqueror. Несмотря на то, что в Firefox включен модуль проверки орфографии в формах, алгоритма расстановки переносов там так и не появилось. Сомнительно также, чтобы в ближайшем будущем появилась поддержка тонких пробелов, колонок и визуального выравнивания вертикальной линии набора. Колонки — разговор особый. На веб-страницах они в полном понимании этого слова появляются очень редко. Это связано с тем, что текст на веб-страницах, как уже говорилось, весьма подвижный, так что такое ручное формирование соседних столбцов текста, чтобы при изменении размера страницы или кегля шрифта текст все равно оставался выровнен по верхнему и нижнему краям, достаточно сложно. В программах верстки при изменении размера колонок или кегля шрифта текст автоматически перетекает из колонки в колонку, пока не будет достигнуто выравнивание. Колонки отсутствуют в спецификациях CSS, а производители браузеров двигаются с сторону стандартов, закрывая глаза на бедность возможностей оформления текста на страницах, поэтому в ближайших версиях ожидать такого новшества не приходится. Тут есть еще один момент. Страница печатного издания всегда перед глазами, и двигаться по колонкам текста нетрудно. (Некоторые проблемы возникают, когда полоса газеты — большого формата, например, А2, а текст сверстан на всю высоту полосы.) Особенность веб-страниц в том, что они могут быть любой высоты. Посетитель страницы, прочитав одну колонку, должен будет промотать страницу вверх и снова начать чтение, вместо того, чтобы читать текст последовательно. Поэтому колонки на веб-страницах применяются в основном для независимых блоков текста: в одной колонке средства навигации, в другой основной текст, в третьей дополнительная информация, и.т.п.

Однако множество других параметров, присущих оформлению текста в хороших печатных изданиях, можно реализовать на веб-страницах. Ниже приводится краткий обзор принципов оформления текста. Если сравнивать понятия верстки веб-страниц с полиграфической версткой, то окажется, что три основных тэга для фрагментов текста имеют прямые соответствия в верстке печатных изданий. Тэг
соответствует любому текстовому блоку на странице (в разных программах верстки они обычно называются фреймами и блоками текста), при этом он может объединять сколько угодно абзацев. Тэг соответствует абзацу. Тэг соответствует отрезку текста, меньшему, чем абзац. Первые два элемента являются блочными (block), третий — линейным (inline). Все три тэга не имеют семантики, они нужны для физического разделения текста.