Web... Просто Web...

Новости

Сегодня в выпуске:

• Новости сайта и форума рассылки.
• Статья «Доступность текста в сети — определяем размер шрифта для верстки».

Последние статьи на ComputerLibrary.info:

• Доступность текста в сети — определяем размер шрифта для верстки [ Юзабилити ]
• Интернет-глупости [ Обзоры ]
• Google и тематика сайта [ Раскрутка ]
• «Пьяная» реклама на службе Internet [ Раскрутка ]
• Манифест борцов за свободу интернет-форумов [ Разное ]
• Ключевые запросы в поисковых системах на основе статистики Рунета [ Раскрутка ]
• Введение в оформление текстов для веб [ Юзабилити ]
• Absolute StartUp manager 2.1 оптимизирует автозагрузку и вашу компьютерную жизнь [ Система ]
• Пиринговые сети [ Интернет ]
• iMesh — путеводитель по поиску файлов в сети [ Интернет ]

Последние темы форума Forum.ComputerLibrary.info:

• WinXP. Файл подкачки. [ Windows OS ]
• Крыска Genius [ Hardware ]
• Как настроить виртуальные хосты apache? [ Разное ]
• IE: быть или не быть? [ Software ]
• Оцените 2 мои сайта [ Оценка сайтов ]
• Зацените дизайн форума! [ Оценка сайтов ]
• Генеалогическое древо unix-систем [ *nix OS ]
• Памятка модератору форума [ Новости форума ]
• URL и URI — в чем разница? [ Разное ]
• Java — что нужно, чтобы начать программить? [ Программирование ]

Доступность текста в сети — определяем размер шрифта для верстки

Автор: Jim Byrne
www.mcu.org.uk
Оригинал статьи

Перевод: YuraZzz
www.computerlibrary.info

Продолжение. Полностью статью можно прочесть на сайте.
Внимание! Статья содержит рисунки, которые не отображаются в The Bat!, и CSS-код, который тоже поддерживается не всеми почтовыми клиентами. Чтобы прочесть статью со всеми элементами, смотрте ее вариант на сайте.

Так ли важно использовать строго определенные единицы измерения?

Джо Кларк в своей книге «Создание доступных веб-сайтов» утверждает, что веб-дизайнерам не стоит слишком беспокоиться о том, что может ли посетитель изменить размер шрифта на сайте или нет. Он основывается на собственном определении людей с ослабленным зрением, считая таковыми тех, кто использует вспомогательные компьютерные средства для работы в сети. Дав людям подобное определение, Джо Кларк утверждает, что выбранные дизайнером единицы определения размера шрифта «абсолютно неважны для людей с сильно ослабленным зрением.» (стр. 223), потому что «Удобство пользования сайтом целиком и полностью зависит от адаптивных технологий, используемых посетителем».

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

Аргументация достаточно привлекательна, но, тем не менее, я вижу несколько проблем, связанных с таким подходом:

• Джо Кларк заявляет, что процесс создания доступного сайта должен быть ориентирован на людей с физическими или познавательными недостатками, но я не согласен с этим определением. Даже если мы создаем сайт именно для людей с различными недостатками, данное Джо Кларком определение веб-дизайна и следование ему будет мешать нам впоследствии заниматься широким спектром работ по поддержанию сайта в рабочем состоянии, повторному использованию опубликованной информации и оптимизации страниц для работы с широким кругом устройств для доступа в интернет. Я бы отнес дополнительные вспомогательные технологии, используемые пользователями, к другим средствам доступа в сеть и мне хотелось бы, чтобы мои сайты хорошо работали со всеми этими средствами.
  
  В своей статье «Что такое удобный и доступный веб-сайт?» я рассматриваю для веб-мастеров и менеджеров веб-проектов различные аспекты доступного сайта и даю определение, которое ведет к формулировке практических советов и правил.
  
  Мне, человеку с хорошим зрением, приходилось встречать множество сайтов, где необходимо было увеличивать размер шрифта для удобства чтения текста. Подход, подразумевающий, что я, как посетитель, должен использовать дополнительные программы для увеличения экранного текста, необоснованно ограничивает возможности доступа к веб-сайту и создает проблемы, которые он вообще-то должен решать.
• Джо Кларк не принимает во внимание хорошо известное соображение, что подобные ограничения и делают людей «нетрудоспособными», а не их физические недостатки. Например, я «нетрудоспособен», потому что текст на сайте слишком мал, чтобы я смог прочесть его и нет возможности изменить размер шрифта, а не из-за моего пониженного зрения. Уберите ограничение, т. е. позвольте мне изменять размер шрифта, и в данной конкретной ситуации я уже не «инвалид», хотя мое зрение никак не изменилось со времени предыдущей попытки прочесть этой текст.
  
  Главное, что возможность или невозможность изменить размер шрифта зависит от выбора единицы измерения.
• По правде говоря, точка зрения Джо Кларка, опровергает мое заявление о необходимости использования относительных единиц для определения размеров шрифта веб-страниц и признает оправданным использование для этих целей пунктов или пикселей. Как вы увидите далее, аргументация против использования пунктов достаточно очевидна. Обосновать отказ от пикселей сложнее, т. к. пиксель — одновременно и абсолютная, и относительная единица измерения в зависимости от браузера и устройства, используемого для просмотра страницы.
  
  Я бы не рекомендовал использование пикселей для задания размеров шрифта веб-страниц, потому что для многих пиксели являются абсолютными единицами, т. е. пользователи не смогут изменить размер шрифта.

Хотя я и не согласен с Джо Кларком по данному вопросу, тем не менее, в целом я разделяю его взгляды на создание доступных сайтов и рекомендую вам его книгу «Создание доступных веб-сайтов».

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

Почему не стоит использовать пункты для задания размера шрифта?

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

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

• Использование абсолютных единиц затрудняет или не позволяет многим посетителям изменить размер шрифта на предпочитаемое ими значение.
• Текст может быть абсолютно нечитабелен из-за маленького размера шрифта в зависимости от используемой для просмотра веб-страницы компьютерной системы.

Почему пункты для задания размера шрифта на экране — это плохо?

Данное объяснение предназначено только для настоящих «фанатов» веб-верстки, т. е. для тех, кому обязательно необходимо подробное рассмотрение проблемы «крошечного текста», как я ее называю. Это проблема, о которой в особенности необходимо знать пользователям компьютеров Macintosh.

Ниже вы видите пример того, как выглядит текст размером 9pt(пунктов), 8pt, 7pt и 6pt на PC с разрешением экрана — 96dpi (dots per inch — точек на дюйм).

Рисунок показывает, что только текст размером 6pt опускается ниже порога читабельности. Однако, тот же самый текст на компьютерах Mac выглядит по-другому из-за стандартного разрешения Macintosh в 72dpi.

Ясно видно, что для Macintosh проблемы с читабельностью текста начинаются сразу после отметки в 9pt. Наиболее общий пример — просмотр на компьютере Mac веб-сайтов, созданных на PC, и поэтому часто нечитабельных. Давайте кратко ответим на вопрос: «почему же так происходит?»

Основная причина в том, что для нормального отображения символов верхнего или нижнего регистра необходимо минимум 9 пикселей (есть шрифты, которые справляются с этой задачей, используя меньшее количество пикселей, но они, как правило, отсутствуют на компьютерах пользователей). Текст размером 8pt на Macintosh визуализируется восьмью пикселями, что слишком мало для четкого и разборчивого символа, вне зависимости от вашего зрения.

Подробнее:

1. Стандартное разрешение Macintosh — 72dpi.
2. 1 пункт — абсолютная единица измерения, равная 1/72 дюйма.
3. Следовательно, для Macintosh 1 пункт равен 1 пикселю, т. е. в каждом дюйме на мониторах Mac ровно 72 пикселя.
4. Для того, чтобы нормально визуализировать букву(глиф), включая верхний элемент литеры (часть строчной буквы, возвышающаяся над основной строкой — прим. перев.) и подстрочный элемент литеры, необходимо как минимум 9 пикселей.
5. Размер шрифта в 8 пунктов означает, что для его визуализации будет использовано только 8 пикселей.
6. 8 пикселей недостаточно для четкой визуализации шрифта на мониторах с разрешением в 72dpi (см. пункт 4).

В результате, как мы уже видели, любой текст, заданный абсолютной единицей измерения меньше 9 пунктов (или 9 пикселей), будет нечитабелен на компьютерах Mac с стандартным разрешением.

Стоит ли беспокоиться о пользователях Macintosh? Конечно стоит, учитывая, что около 25 миллионов человек используют Mac. Но еще больше стоит побеспокоиться о том, чтобы ваша страница нормально выглядела на самых различных устройствах с доступом в интернет, независимо от разрешения экрана. Многие подобные устройства, «карманные» компьютеры (PDAs — Personal Digital Assistants), например, проигнорируют ваши таблицы стилей, так что возможно размер шрифта не будет проблемой. Но все же я не считаю это слишком серьезным оправданием использования пунктов для задания размеров шрифта на экране.

Больший дюйм за те же деньги или Почему шрифт размером 8 пунктов читабелен на PC?

Стандартное разрешение PC — 96dpi. DPI расшифровывается как «точек на дюйм (dots per inch)», т. е. у пользователей PC изначально больше пикселей для визуализации текста. Но на экране PC этот очевидный факт лишь отвлекает наше внимание от основного вопроса; не существует соответствия между физическим дюймом и дюймом экранным. Система мер компьютеров PC не привязана к физической системе мер — дюйм для PC в 1,3 раза больше, чем обычный дюйм и дюйм для Macintosh.

Все сводится к тому, что все объекты на мониторах PC примерно в 1.3 больше, чем на Mac, это приводит к разнице в 2–3 пункта между формально одинаковыми размерами шрифтов на этих двух компьютерных платформах. Ирония в том, что нет ничего абсолютного в абсолютных единицах измерения размера шрифта в веб; текст, который хорошо смотрится на одном компьютере, может быть нечитабелен на другом, даже для людей с хорошим зрением.

Исправляем маленький нечитабельный текст

Internet Explorer 5 для Macintosh и Netscape 6 решают проблему несоответствия размеров шрифтов Mac и PC, устанавливая по умолчанию разрешение в 96dpi, как бы имитируя компьютеры PC для пользователей Mac. К тому же, в браузеры последнего поколения были добавлены функции увеличения выводимых на экран страниц, что позволяет обойти преграды, связанные с использованием абсолютных единиц измерения. Это замечательная идея, но она помогает лишь пользователям последних версий браузеров. Даже если все новые браузеры будут обладать подобными возможностями, все равно будут оставаться пользователи более старых версий, так что необходимость использования относительных единиц для задания размера шрифта остается.

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

Другие абсолютные единицы

Другие абсолютные единицы измерения, о которых я не упоминал, но которые также не подходят для верстки и отображения текста на экране — это пайки (pc), дюймы (in), сантиметры (cm) и миллиметры. Я не буду тратить время, отговаривая вас от использования каждой из этих единиц. Достаточно будет сказать, что я не рекомендую использовать их, и, если только вам не известны конфигурации компьютеров всех ваших посетителей, эти единицы могут привести к непредсказуемым результатам.

Так почему же тогда CSS позволяет использовать пункты, если они не предназначены для верстки веб-текстов?

Пункты предусмотрены спецификацией CSS для создания альтернативных таблиц стилей для устройств печати в случае, если посетитель захочет распечатать страницу вместо ее просмотра. В случае верстки текстов для печати использование пунктов обоснованно. Зная, что документ A4 стандарта Великобритании имеет размер 8,27 дюйма (21 см) на 11,69 дюйма (29,7 см) и 8½" (21,6 см) x 11" (27,94 см) для США, Канады и Мексики, имеет смысл задание полей, отступов страницы и размера шрифта через дюймы или пункты (пункт — 1/72 дюйма) или через любую другую абсолютную единицу измерения, т. к. в данном случае результат визуализации предсказуем.

Размер шрифта относительными единицами измерения

Хорошо. Теперь, если вы поняли, почему необходимо верстать текст, используя относительные единицы измерения вместо абсолютных, давайте рассмотрим возможные пути выполнения поставленной задачи, а именно:

• Использование каскадных таблиц стилей (CSS).
• Использование тега <FONT>.
• Использование html-тегов <BIG> и <SMALL>.

Из вышеперечисленного каскадные таблицы стилей больше всего соответствуют современным стандартам.

Использование каскадных таблиц стилей

Я предпочитаю использовать каскадные таблицы стилей из-за неоспоримых преимуществ: структура документа отделяется от его представления, уменьшается размер страницы и, соответственно, время ее загрузки (особенно из-за отсутствия сотен тегов <FONT>), также на подобных страницах теоретически легче менять дизайн. В CSS размер шрифта определяется свойством font-size и одной из следующих относительных единиц измерения:

• Единицы em, en или ex
• Проценты
• Относительные ключевые слова
• x-height
• Относительные ключевые слова задания абсолютного размера шрифта
• Пиксели (смотрите далее мои доводы против использования пикселей)

Для селектора body можно написать следующее:

body
{
font-size: 1em;
}

В этом примере я использовал em — единицу измерения, знакомую всем печатникам. Я буду использовать em во всех последующих примерах по заданию размера шрифта в CSS и при рассказе о возможных проблемах и несовместимостях. В сети 1 em равен 100% размера шрифта родительского элемента. (Заметьте: «родительского элемента», а не «установленного в настройках браузера». Это важный принцип, который необходимо понять, чуть ниже я расскажу о нем подробнее.)

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

Em на практике

Пример 1

body
{
font-size: 1em;
}

Если размер шрифта в настройках браузера равен 16pt, а размер шрифта селектора body — 1em, учитывая, что другие элементы не используют свои настройки font-size, то размер текста при отображении в браузере будет равен 16 пунктам, т. е. 100% от настроек браузера.

Пример 2

body
{
font-size: .9em;
}

При тех же настройках браузера, если размер текста внутри элемента body установлен в .9em, размер шрифта будет равен 90% от 16pt.

Пример 3

body
{
font-size: .9em;
}
p
{
font-size: .9em;
}

Снова, учитывая те же настройки браузера, установим размер шрифта селектора body равным .9em и также для селектора p — .9em. Чему теперь будет равен размер текста внутри параграфа? 90% от настроек браузера (т. е. от 16pt) или 90% размера элемента body?

Правильный ответ: 90% от размера body, т. е. 90% от 90% от 16pt. Т. к. параграф (<p>) является дочерним элементом body, то перед применением собственных свойств размера шрифта он наследует и свойства body.

Все, теперь можно переходить к примерам практического использования данных возможностей и к примерам возможных ловушек, которые возникают при непонимании иерархической природы HTML.

Понимание наследования

Вот пример наследования — явления, когда дочерний элемент наследует свойства и их значения у родительского элемента:

Сначала исходный код стилевого форматирования текста:

<div style=""font-size:" 1em;">
<p>Этот параграф установлен внутри элемента div с размером шрифта в 1em, поэтому он должен отображаться размером шрифта, установленным в браузере по умолчанию.</p>
</div>

<div style=""font-size:" .9em;">
<p>Этот текст находится внутри элемента div с размером шрифта, равным .9em.</p>
<p style=""font-size:" .9em;">Этот параграф находится внутри элемента div с размером шрифта, равным .9em. Размер шрифта этого параграфа меньше, т. к. собственное свойство font-size этого параграфа также равно .9em.</p>
</div>

А вот как это должно выглядеть:

Этот параграф установлен внутри элемента div с размером шрифта в 1em, поэтому он должен отображаться размером шрифта, установленным в браузере по умолчанию.

Этот текст находится внутри элемента div с размером шрифта, равным .9em.

Этот параграф находится внутри элемента div с размером шрифта, равным .9em. Размер шрифта этого параграфа меньше, т. к. свойство font-size этого параграфа также равно .9em.

Если ваш браузер не понимает эту разметку, то вы можете посмотреть рисунок, иллюстрирующий наследование в CSS.

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

Краткий обзор других относительных единиц измерения

Относительные ключевые слова

Задать относительный размер шрифта можно, используя ключевые слова «larger» и «smaller». Если вы смиритесь с тем, что никогда точно не узнаете, насколько оформленный таким образом текст будет больше или меньше родительского элемента, тогда можете спокойно пользоваться этим способом. Однако, как считают Чарли, Венди и Джо Петит (Charlie, Wendi, Joe Petitt) из Джейнсвилла (Janesville), создатели сайта Oo Kingdom: «При изменении размера текста в IE могут появляться необъяснимые ошибки», к тому же Netscape 4 (Mac) и IE3 просто проигнорируют эти данные ключевые слова, хотя возможно это не так уж и плохо.

«Smaller» означает, что указанный элемент меньше родительского на один размер. В приведенном ниже примере текст внутри body имеет размер 1em. И если в настройках браузера размер шрифта по умолчанию — 12pt, то параграф со свойством smaller будет равен приблизительно 10pt, т. е. на один размер меньше. Точную величину «одного размера» сложно установить, потому что она зависит от браузера. Вот пример использования ключевого слова smaller:

BODY
{
font-size: 1em;
}
P
{
font-size: smaller;
}

Эрик А. Мейр (Eric A. Mayer), автор книги «Каскадные таблицы стилей для профессионалов» («Cascading Style Sheets: The Definitive Guide») издательства O'Reilly & Associates, указывает на проблемы, связанные с использованием этих ключевых слов. Подобные проблемы свойственны всем относительным единицам измерения, если использовать их, не учитывая иерархическую природу HTML и каскадную — таблиц стилей.

Эрик иллюстрирует это примерами задания размера шрифта внутри ячеек таблиц, например:

TD
{
font-size: smaller;
}

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

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

Ключевое слово «larger» работает аналогично «smaller», но только постепенно увеличивая размер шрифта. Те же предосторожности необходимы и в данном случае, иначе текст может стать натолько большим, что будет отнимать большую часть экранного пространства.

X-height

Другая относительная единица измерения — это x-height, равная высоте литеры «x» в нижнем регистре. Я не советовал бы вам пользоваться x-height, если только вы не профессионал в типографском деле и точно знаете, как будет отображен текст для посетителя, просматривающего ваш сайт с использованием шрифта, отличного от выбранного вами. Использование пользователем другого шрифта может сделать текст трудно читаемым.

Они относительные, но не так, как мы себе это представляем, Джим: использование ключевых слов задания абсолютного размера

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

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large

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

Джеффри Зельдман (Jeffrey Zeldman) пишет:

«При правильной и единообразной поддержке эти семь ключевых слов могли бы позволить дизайнерам определять примерные размеры шрифтов без использования пикселей, приводящих к проблемам доступности сайта… Поэтому W3C рекомендует их использование.»
(Боязнь таблиц стилей 4: www.alistapart.com/stories/fear4/4.html)

Великолепно! Я уже готов использовать их вместо em на своем сайте, но в следующем параграфе читаем:

«К сожалению, ключевые слова задания абсолютного размера шрифта непригодны для использования с современными браузерами, т. к., по нашему мнению, только IE5/Mac (и возможно Opera 4) отображают их корректно.»

Неправильная поддержка браузерами — это основная помеха для использования ключевых слов задания абсолютного размера шрифта. Если вы готовы потратить время на изучение проблемы и поиск обходных путей, то она несомненно стоит того. Начните с работ Джеффри Зельдмана, Эрика Мейра и Тода Фахнера (Todd Fahrner), в которых они подробно рассматривают этот вопрос. Возможно, в будущем ключевые слова и будут самым верным решением, но не сейчас.

Уважаемые читатели, ограничение сервера рассылок на максимальный объем одного выпуска рассылки не позволяет опубликовать статью полностью. Поэтому я предлагаю вам прочесть этот отрывок (что вы, наверное, уже и сделали :) ) и, если вы заинтересовались данной темой, прочитать статью полностью уже на сайте. Больше в рассылке продолжения публиковаться не будут.

http://computerlibrary.info/view/article43/ — статья полностью (включая начало, опубликованное в прошлом выпуске, и конец статьи, который в рассылке публиковаться не будет).
http://computerlibrary.info/view/article43/print/ — версия статьи для печати.
http://computerlibrary.info/view/article43/comment/ — жду ваших отзывов и комментариев по поводу статьи. Очень жду!

Данная статья является второй частью трилогии Джима Берна (Jim Byrne) о публикации в сети доступных и удобных для чтения текстов. Перевод первой вводной статьи из данного цикла можно прочесть на сайте рассылки:
«Введение в оформление текстов для веб».

Постскриптум

Уважаемые подписчики,

• если у вас есть какие-то вопросы, предложения, пожелания касательно рассылки, пишите на мой e-mail: yura@computerlibrary.info,
• если вам нравится рассылка, присылайте интересные статьи о веб-строительстве на мой e-mail. Все, достойное внимания, будет опубликовано,
• предложите своим друзьям и знакомым подписаться на рассылку, ведь чем больше читателей, тем больше я буду стараться,
• подписаться на другие мои рассылки можно с этой страницы,
• по поводу рекламы в рассылке пишите сюда же.

Удачного веб-строительства :),
С уважением, Юрий.