Осторожно: кириллица

Любая попытка изменить шрифт, которым выводится текст, осложняет и без того непростую ситуацию с поддержкой в HTML русского ал­фавита. Даже без какого бы то ни было переключения шрифтов русский текст может оказаться для какой-то части вашей аудитории нечитабельным; очевидно, что любые экс­перименты в шрифтовой области способны только повысить вероятность этого печального исхода.

Собственно говоря, из описанных выше технологий только встраивание шрифта в документ способно гарантировать соответствие кодировок текста и шрифта (что и понятно —

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

Сейчас на русскоязычных сайтах изредка применяется лишь самое простое из всех шрифтовых решений — переключе­ние в рубленый шрифт, для чего можно написать FONT face="arial cyr,arial". Однако даже этот простейший вариант почти наверняка доставит неприятности многим вашим пользователям, так что лучше всего не искушать судьбу и обойтись для русского текста шрифтом по умолчанию.

Цвет

Цвета текста и фона играют в HTML особую роль — эти параметры указываются в атрибутах тега BODY и по­тому относятся скорее к свойствам всего документа, чем к параметрам набора текста. А поскольку ошибка в этих параметрах может запросто привести к нечитабельности текста (если цвет букв совпадает с цветом фона или близок к нему), пользователь любого визуального броузера имеет возможность выбрать свои собственные значения для цвета фона, текста и ссылок и запретить броузеру обращать вни­мание на цветовые атрибуты тега BODY. Одним из следствий этого является то, что в этом теге нужно либо не указывать ни одного цветового атрибута, либо обязательно перечи­слить все три; любая частичная спецификация (например, указание цвета текста без упоминания о цвете фона) может конфликтовать с цветами, установленными по умолчанию в броузере пользователя.

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

цветов в тот момент, когда фон внезапно подстилается под уже видимые элементы переднего плана.

Цвета, указываемые в атрибуте color тега FONT, перекры­вают как цвет из атрибута text тега BODY, так и цветовые установки броузера. Можно даже менять цвет ссылок, вста­вив тег FONT с атрибутом color внутрь тега A. CSS, в свою очередь, позволяет менять не только цвет букв, но и фо­новый цвет любого элемента, в том числе и фоновый цвет отдельных символов и фрагментов текста. Если часть текста закрашена одним цветом, а часть другим (что обычно бы­вает, когда фон состоит из сильно различающихся по цвету областей — например, светлой центральной части и темной полосы вдоль границы экрана), фоновый цвет в теге BODY должен быть таким, чтобы на нем были легко различимы оба цвета текста.

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

Выбрав для текста чисто белый текст на не-белом фоне, имейте в виду, что броузер не станет воспроизводить фоновый цвет при печати страницы на принтере. MSIE поступит при этом вполне разумно, самостоятельно заменив перед посылкой на печать цвет текста на черный, но в броузере Netscape для этого нужно будет установить (по умолчанию сброшенный) флажок Black Text в настройках печати (точнее, вам как автору страницы нужно будет напомнить сделать это вашему читателю), — иначе из принтера вылезет белый лист без каких-либо следов текста страницы. Об этом нужно помнить при выборе цветовой схемы для страниц, которые пользователь с большой вероятностью захочет распечатать (счетов, инструкций и т.п.).

Ссылки

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

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

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

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

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

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

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

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

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

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

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

Не нашли, что искали? Воспользуйтесь поиском: