Блоки текста

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

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

Рецепт же доступности информации известен давно: для этого нужно отделить логическую основу (в случае тек­ста — просто последовательность символов) от параметров ее представления (кегля, шрифта, размещения и пр.), отдав эти параметры на усмотрение пользователя (и, разумеется, дизайнера — но все же оставив за пользователем приоритет). Имея доступ к «тексту как таковому», пользователь и его программы смогут оформить его так, чтобы обеспечить комфортное чтение — с учетом возможностей устройства

216

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

Открытость текста в HTML дает слишком много преиму­ществ, чтобы от нее можно было отказаться ради милой сердцу дизайнера неизменности внешнего вида документа. С появлением XML принцип открытости и разделения ло­гической и оформительской информации распространяется с текста и на структуру документа. Я уже достаточно писал в гл. I о важности структурной разметки, поэтому здесь нам достаточно рассмотреть лишь чисто практические следствия, которые для дизайнеров имеет работа с тек­стом — этим «островком структурности» в довольно-таки непоследовательном и идеологически невыдержанном языке HTML.

Рассмотрим по порядку основные параметры оформления текста (эстетические аспекты которых мы обсуждали в гл. II, стр. 138) и соответствующие возможности и ограничения, имеющиеся как у пользователя броузера, так и у создателя страницы.

Кегль

Физический размер букв на странице зависит от двух факторов: базового кегля, устанавливаемого в настройках броузера, и относительного размера, выставляемого в HTML с помощью тегов SMALL, BIG и тега FONT с атрибутом size (который может принимать значения от I до 7, причем базовому кеглю соответствует size=3). В отсутствие любого из этих тегов текст набирается базовым кеглем; средствами HTML вы можете только отклоняться от этой нулевой отметки в ту или иную сторону.

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

217

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

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

Лучше всего страница должна выглядеть при том базовом кегле, который ставится по умолчанию (многие пользо­ватели вообще не заглядывают в настройки и не знают, что базовый кегль можно изменить) в броузере, только что установленном на самой распространенной платформе (Windows 95/98) с самым распространенным экранным раз­решением (сейчас в России эта величина составляет 800 на 600 пикселов). При этом страница должна безболезненно выдерживать увеличение базового кегля минимум в два раза.

Особо следует остановиться на видимом отличии размеров букв в разных шрифтах. Пользуясь тегом FONT с атрибутом face (а иногда и строго логи­ческими тегами вроде CODE или SAMP, устанавливающими моноширинный шрифт), вы можете столкнуться с тем, что буквы «чужого» шрифта вы­глядят заметно больше или заметно меньше расположенных рядом букв основного шрифта. В таких случаях нужно удержаться от соблазна вы­ровнять кегли атрибутом size, так как, во-первых, на другом компьютере соотношение размеров может быть прямо противоположным (оно сильно зависит от версий броузеров и установленных на компьютере шрифтов), а во-вторых, в случае логических тегов параметры оформления вообще не должны вас заботить — так, тег CODE нужен, чтобы пометить иденти­фикатор или фрагмент программы, а не для того, чтобы переключиться в моноширинный шрифт.

218

CSS (стр. 40) поддерживает как принятый в HTML ме­ханизм ступенчатого увеличения и уменьшения шрифта относительно базового кегля, так и задание кегля в абсо­лютных единицах длины (пикселах, пунктах и т. п.) с помо­щью свойства font-size. CSS уровня 1 добавляет свойство font-size-adjust, с помощью которого можно автомати­чески выравнивать разные шрифты не по «паспортной» величине кегля, а по высоте строчных букв, обеспечивая гораздо лучшее визуальное соответствие размеров разных шрифтов.

Шрифт

Так же как установка кегля шрифта имеет два аспекта — эстетический (чтоб прилично смотрелось) и приземленно-практический (чтобы можно было читать без рези в гла­зах), — так и выбор гарнитуры и начертания, кроме подробно обсуждавшихся в предыдущей главе художествен­ных требований (стр. 133), должен удовлетворять одному гораздо более важному практическому условию: шрифт дол­жен содержать изображения (глифы) для всех символов, использующихся в тексте. Эта проблема, в свою очередь, распадается на две части: нужно, во-первых, чтобы все тре­буемые глифы действительно были в шрифте, а во-вторых — чтобы кодировки текста и шрифта (по крайней мере, в части используемых символов) совпадали. О текстовых кодиров­ках в HTML и связанных с этим вопросах мы уже говорили в гл. I (стр. 14).

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

Именно эта идея лежит в основе стандартных средств вы­бора шрифта в HTML и CSS. Значением атрибута face тега FONT может быть одно или несколько наименований шрифтов, разделенных запятыми. Броузер, сканируя эту строку, пытается найти хотя бы один из заказанных шриф­тов и включает его для вывода текста документа. Если ни один из них не найден (или если никаких указаний относи­тельно шрифтов в документе не содержится), используется

219

стандартный системный шрифт (на большинстве операци­онных систем это Times Roman).

CSS уровня 1 пользуется той же схемой: свойству font-family также можно присвоить в качестве значения строку, состоящую из имен шрифтов, — за тем исключением, что кроме названий конкретных гарнитур можно как один из вариантов (обычно на последнем месте в списке) указать родовой признак нужного шрифта — serif, sans-serif, monospace и т. п. Не найдя конкретных заказанных шрифтов, броузер будет по крайней мере знать, какой из имеющихся в системе шрифтов следует использовать в данном случае — например, Times (т.е. serif), Arial (sans-serif) или же Courier (monospace).

В CSS уровня 2 этому механизму при неизменном синтаксисе придано расширительное толкование: броузер обязан не просто найти первый же доступный из перечисленных шрифтов и переключиться в него, но и сле­дить за соответствием набора символов текста репертуару глифов шрифта. Как только в тексте встретится отсутствующий в текущем шрифте сим­вол, броузер обязан снова обратиться к списку рекомендованных шрифтов и посмотреть, нет ли там шрифта в нужной кодировке, подходящего для отображения этого символа. Таким образом, свойство font-family может содержать не только перечисление сходных по внешнему виду шрифтов в порядке убывания их пригодности и повышения вероятности их обнару­жения, но и имена шрифтов с разными наборами символов, между кото­рыми броузер будет переключаться в зависимости от того, какие символы встречаются в тексте.

Для практики важнее другой вопрос — какие шрифты с наи­большей вероятностью можно обнаружить на компьютере типичного пользователя и на какие, следовательно, шрифты может рассчитывать дизайнер, не желающий связывать­ся с технологиями встраивания шрифтов в документ? Речь здесь может идти не о наименованиях отдельных шрифтов, а только об обобщенных шрифтовых типах, представленных на разных компьютерных платформах раз­ными по названию (хотя нередко близкими по начертанию) шрифтами.

Кроме используемого по умолчанию шрифта с засечками, обычно представленного гарнитурой Times Roman, любая графическая операционная система имеет еще два типа шрифтов: рубленый (в Windows — Arial) и моноширинный (в Windows — Courier). Из них особенно часто в дизай­не применяется рубленый шрифт, для выбора которого, с учетом названий стандартных рубленых шрифтов в раз­ных операционных системах, можно порекомендовать такую запись в HTML:

220

<FONT face="Arial,Geneva,Helvetica">

и в CSS:

font-family: Arial,Geneva,Helvetica,sans-serif

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