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

225

С другой стороны, разумеется, добавление ссылки не может пройти бесследно для звучания, интонации и, в каком-то отношении, даже для смысла фразы. Если считать ссылку разновидностью текстового выделения, то можно сформу­лировать несколько практических советов. Прежде всего, точно так же как курсивом не стоит выделять целое пред­ложение, длину ссылки нужно ограничивать необходимым минимумом — например, ссылкой на архив с программой достаточно сделать ее название или слово «download», а не всю фразу целиком. Ссылочным лучше всего делать то слово или словосочетание, которое допускает, с учетом смысла всего предложения, произнесение с логическим ударением (эмфазисом), пусть и не сильно выраженным. И наконец, следует избегать разметки ссылок поверх курси­ва, полужирного и других традиционных средств текстового выделения. Кстати, довольно-таки странно выглядит ссылка во внутритекстовом заголовке (если только вы не решите снабжать ссылками — например, на список разделов вверху страницы — все заголовки подряд).

Общепринятые визуальные атрибуты ссылки — измененный по отношению к основному тексту цвет (о принципах выбора которого мы говорили на стр. 113) и подчеркивание — явно дублируют друг друга. И хотя такое двойное акцентирование помогает ориентироваться в текстовых ссылках быстро и почти подсознательно, подчеркивание все же не стало в массо­вом сознании обязательным признаком гипертекстовой ссылки. Косвенным подтверждением этому может служить тот факт, что в графических ссылках (например, на кнопках навигации) текст почти никогда не снабжается под­черкиванием. Поэтому в последнее время появляется все больше сайтов, отключающих с помощью CSS подчеркивание и для текстовых ссылок (для этого в стилевой спецификации достаточно написать A {text-decoration: none}).

Другие параметры

Почти все остальные параметры набора текста пока что поддаются регулировке только с помощью CSS (со всеми оговорками о применимости этой технологии, стр. 40). HTML не позволяет ни изменять межстроч­ные, межбуквенные и межсловные расстояния, ни как-либо влиять на переносы текста, ни поворачивать или масшта­бировать текстовые объекты. (Можно, правда, изменять выравнивание текста по левому краю на противополож­ное, — однако выключка текста по ширине возможна, опять-таки, только с помощью CSS.) Судя по всему, еще очень далек тот день, когда визуальные броузеры смогут обеспечить такой же контроль над текстовыми блоками, как даже самый примитивный из графических редакторов.

226

Стоит сказать пару слов об оформлении абзацев. По тради­ции броузеры не делают отступов красной строки, отделяя абзацы друг от друга вертикальными отступами (как в этой книге). Не прибегая к помощи CSS, можно имитировать более традиционное (с точки зрения книжной верстки) оформление, заменив тег Р между абзацами на BR со сле­дующей за ним горизонтальной распоркой — невидимой графической вставкой или несколькими подряд неразрыва­емыми пробелами   (стр. 238). Если, однако, учесть, что того же видимого результата можно добиться с по­мощью CSS (обнулив значение margin и указав отступ красной строки text-indent для тега Р) уже в четвер­тых версиях обоих броузеров, от подобных искусственных приемов лучше воздержаться: членение на абзацы очень важно для информационной целостности текста, и неразум­но жертвовать структурной разметкой этого аспекта ради сиюминутных визуальных выгод.

Здесь же нужно обсудить особенности оформления та­бличного текста. Как вы уже наверняка знаете, таблицы в HTML есть основной и почти единственный инстру­мент для размещения материала на двумерной плоскости страницы (мы будем подробно говорить об этом ниже, стр. 234). Однако не так уж редко на веб-страницах встречается и собственно табличный материал, организация которого в строки и столбцы несет информационную, а не визуальную нагрузку.

Для больших по объему таблиц нужны визуальные средства, подчеркивающие их табличную структуру и помогающие взгляду скользить по строкам и столбцам. К сожалению, предлагаемая для этого стандартным HTML разлиновка ячеек (атрибут border) имеет два больших недостатка. Во-первых, линейки невозможно провести выборочно — либо в таблице нет ни одной линейки, либо каждая ее ячейка за­ключена в рамку со всех четырех сторон. И во-вторых, сами эти линейки в визуальных броузерах, так же как и раздели­тели HR и границы фреймов, имеют вид псевдотрехмерных бороздок, о неприемлемости которых в серьезном дизайне уже достаточно говорилось на стр. 203.

Отказавшись от громоздкой и вызывающей приступы клау­строфобии разлиновки по умолчанию, дизайнер может вос­пользоваться тем, что для каждой ячейки таблицы можно задать свой цвет фона, отличный от фона всей страницы и даже закрывающий на территории этой ячейки фоновое

227

изображение (если оно есть). Заливкой фона можно вы­делять заголовки и боковики в таблицах; популярен также прием подсветки через одну строк с основными данными (такие полосатые таблицы, например, используются для списков книг на сайте books.ru, пример 15). Кроме того, с помощью изменения цвета фона можно имитировать и ча­стичную разлиновку — например, вставив после боковика узкую ячейку, простирающуюся по всей высоте таблицы, и закрасив ее каким-то цветом, мы получим вертикальную линейку, избавленную от обоих упомянутых выше недостат­ков стандартной разлиновки.

Спецификация HTML 4.0, принятая в начале 1998 года, значительно рас­ширила, по сравнению с предыдущими версиями, набор средств для раз­метки таблиц. Большинство новых тегов и атрибутов предназначены для более адекватной структурной разметки таблиц и для более гибкого пред­ставления табличной информации в невизуальных броузерах. Есть, однако, и усовершенствования в средствах визуального форматирования — в част­ности, атрибуты frame и rules позволяют выборочно проводить линейки между ячейками и вокруг таблицы.

When all else fails

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

Многие дизайнеры относятся с недоверием (вполне, надо признать, обоснованным) ко всем технологиям, выходящим за пределы HTML и GIF, не желая подвергать свое хрупкое творение «капризам погоды» на компьютере пользователя и пользуясь графикой для передачи любого текста, чье оформление небезразлично для производимого страницей художественного впечатления. С точки зрения таких авто­ров, идеальным форматом для распространения информа­ции в Интернете является не HTML (с этим, впрочем, вряд ли кто-то будет спорить) и не XML, a PDF (стр. 58), у кото­рого нет нескольких конкурирующих программ просмотра,

228

но зато есть полная свобода в использовании шрифтов и оформлении текстовых элементов.

Чаще всего графические вставки применяются для заго­ловков (о них мы уже говорили на стр. 200), кнопок на панелях навигации, а также для выделенных фрагментов текста, таких как рекламные лозунги, вводные абзацы статей или «выдернутые» цитаты (англ. pull-out quotes, пример 7). Эстетическое воздействие аккуратно сверстанного графи­ческого текста, к сожалению, бывает сильно подпорчено конфликтом с расположенным рядом обычным текстом, почти всегда имеющим на компьютере пользователя не тот кегль, на который рассчитывал дизайнер. Но безусловно самое ужасное, что только может сделать дизайнер в этой ситуации, — это отлить в графику текст с ошибками или даже просто с опечатками: по вполне объяснимым причинам неаккуратность в подготовке «кускового» текста раздражает во много раз сильнее, чем огрехи в обычном тексте «россыпью».

Перенос текста в графику откровенно противоречит идеоло­гии открытости информации, принятой в HTML и особенно в XML. Тем не менее нельзя сказать, что такой «окаменев­ший» текст навсегда потерян для неграфических броузеров и автоматических сборщиков информации: специально для текстового эквивалента графического изображения пред­назначен атрибут alt тега IMG, в котором вы обязаны дословно воспроизвести весь зашитый в графику текст (стр. 35).

Правила набора текстов

Кроме ограничений технологических и дизайнерских, при оформлении текста на веб-странице нужно учитывать многочисленные типографские традиции, сложившиеся задолго до появления компьютеров. Ниже я перечислю те из правил текстового набора, которые вполне выполнимы даже с простейшей и самой массовой из использующихся сейчас технологий — языком HTML (т. е. те, которые не требуют смены шрифтов или точной подгонки отступов).

Расстановка пробелов

Я заранее прошу прошения у тех, кто всегда соблюдал приведенные ниже правила, особо над ними не задумываясь, — опыт подсказывает мне, что внятно сформулировать эти правила будет все же не лишне. Итак, в русскоязычном наборе пробел обязательно ста­вится:

• после, а не до запятой, точки, точки с запятой, двоеточия,  вопро-

229

в конце фразы или предложения, закрывающей скобки и закрывающей кавычки;

• до, а не после, открывающей скобки, открывающей кавычки и много­точия в начале предложения;

• и до, и после длинного тире (в английском языке, наоборот, длинное

тире не окружается пробелами).

Никогда не ставится пробел между скобкой или кавычкой и каким-либо другим знаком препинания, кроме длинного тире.