Веб-дизайн - Дмитрий Кирсанов

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

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

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

КЕГЛЬ

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

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

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

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

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

ШРИФТ

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

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

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

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

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

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