Относительные пикселы или В чем задавать размер шрифта

Как вы все прекрасно знаете, консорциум W3C в стандарте CSS 2.1 дает нам для задания размеров, в частности шрифтов, абсолютные и относительные единицы измерения.

К абсолютным причислены:

  • in inches, дюймы. 1 дюйм = 2.54 сантиметра
  • cm — сантиметры
  • mm — миллиметры
  • ptpoints, пункты. 1 пункт = 1/72 дюйма. То что находится в выпадающем списке Ворда при выборе размера шрифта и есть пункты
  • pcpicas, пики. 1 пика = 12 пунктам

К относительным:

  • emfont-size, высота соответствующего шрифта (). Так же встречалось определение em — как ширины символа m.
  • exx-height, высота символа x соответствующего шрифта
  • px — пикселы

Вы заметили?
Пикселы — относительные еденицы измерения!
Как, а вы не знали? :)

Мануал CSS 2.1 поясняет:

Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего — дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя.

Это теория.

А теперь немного практики.

Открываем наш любимый Windows на Панели управления. В свойствах «Экрана» заглядываем на закладку Настройка -> Дополнительно -> Общие:

96dpi.GIF

96 точек на дюйм (dots per inch). Это — типичная плотность (dpi) для мониторов с разрешением 1024×768 и около того.
Для чего же нам этот параметр? 96 dpi означает, что на один дюйм вашего монитора приходится 96 пикселов. Нет, не нужно тянуться к линейке, реальная величина зависит от монитора, можете верить на слово. Этот параметр необходим для пересчета физических размеров матрицы монитора (дюймы, сантиметры, миллиметры) в пикселы и обратно.

А теперь о том, с чего начался этот пост.

Измените разрешение с 96 dpi (Мелкий шрифт) на 120 dpi (Крупный шрифт) и посмотрите во что превратится ваш любимый интернет. И это не говоря уже о программах, написанных под разрешение 96 dpi.
Вся проблема в том, что размеры фиксированных элементов, таких как например картинки, размеры окон и областей, заданы в пикселах, а размеры шрифтов, как правило, в пунктах.

И хотя в теории, ПА (пользовательский агент) должен масштабировать пикселы, на практике пикселы остаются абсолютными.

Учитывая широкое распространение мониторов с диагональю более 17″, все чаще пользователи вместо того чтобы увеличивать размер шрифта по умолчанию, увеличивают плотность, отказываясь от стандартной в 96 dpi.

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

Например, при стандартной плотности 96 dpi, шрифт 14 pt имеет высоту:

H = 14*96/72 = 18.666 px ~ 19 px

А при плотности 120 dpi, шрифт 14 pt имеет уже высоту:

H = 14*120/72 = 23.333 px ~ 23 px

Пересчет из пунктов (pt) в пикселы (px) делается из соотношения 1 pt = 1/72 дюйма:

H = pt * dpi / 72

Вот такие вот относительные пикселы :)

P.S. Пока ребята из W3C теоретизируют, давно уже надо было передавать в cgi запросе, наряду с User agent, такие параметры как разрешение экрана, размеры отображаемой области браузера, dpi и глубину цвета. А на стороне сервера просто выбирать нужный шаблон. Ведь не в 20-м веке живем.

Похожие записи:

Относительные пикселы или В чем задавать размер шрифта: 2 комментария

  1. Юрий

    Хорошая статья! Маленькая грам. ошибка — размеры шрифтов следует задавать в пикселах, а не в относительных еденицах. (единицах)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *