Відносні пікселі або в чому задавати розмір шрифту - urth - s freehold
Як ви всі прекрасно знаєте, консорціум 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 пояснює:
А тепер трохи практики.
Відкриваємо наш улюблений 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
А при щільності 120 dpi. шрифт 14 pt має вже висоту:
H = 14 * 120/72 = 23.333 px
Перерахунок з пунктів (pt) в пікселі (px) робиться зі співвідношення 1 pt = 1/72 дюйма:
Ось такі ось відносні пікселі :)
P.S. Поки хлопці з W3C теоретизируют, давно вже треба було передавати в cgi запиті, поряд з User agent, такі параметри як дозвіл екрана, розміри відображається області браузера, dpi і глибину кольору. А на стороні сервера просто вибирати потрібний шаблон. Адже не в 20-му столітті живемо.