Относительные пикселы или В чем задавать размер шрифта
Как вы все прекрасно знаете, консорциум W3C в стандарте CSS 2.1 дает нам для задания размеров, в частности шрифтов, абсолютные и относительные единицы измерения.
К абсолютным причислены:
- in - inches, дюймы. 1 дюйм = 2.54 сантиметра
- cm – сантиметры
- mm – миллиметры
- pt – points, пункты. 1 пункт = 1/72 дюйма. То что находится в выпадающем списке Ворда при выборе размера шрифта и есть пункты
- pc – picas, пики. 1 пика = 12 пунктам
К относительным:
- em – font-size, высота соответствующего шрифта (). Так же встречалось определение em – как ширины символа m.
- ex – x-height, высота символа x соответствующего шрифта
- px – пикселы
Вы заметили?
Пикселы – относительные еденицы измерения!
Как, а вы не знали? :)
Мануал CSS 2.1 поясняет:
Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего – дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя.
Это теория.
А теперь немного практики.
Открываем наш любимый Windows на Панели управления. В свойствах «Экрана» заглядываем на закладку Настройка -> Дополнительно -> Общие:
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-м веке живем.