У минулій моїй статті я торкнувся одиниці виміру і тут же в коментарях почалися на цю тему суперечки і обговорення, тому я вирішив винести це питання в окремий пост. Ось тепер і обговоримо:)
Одиниці довжини бувають двох категорій: абсолюні і відносні. До абсолютних належать:
- дюйми (in)
- сантиметри (cm)
- міліметри (mm)
- пункти (pt)
- піки (pc)
У термінах специфікації css 1pt = 1/72in, а 1pc = 12pt.
У властивості font-size завдання від'ємного значення в одиницях довжини, наприклад -25cm, неприпустиме.
Чому абсолютні? Тому що за ними у фізичному світі стоїть реальна величина, тобто еталони.
З такими одиницями працює пристрій виведення, який має реальний фізичний розмір, наприклад: під час друку використовуватимемо такі одиниці.
А ось для моніторів ці одиниці не мають ніякого значення, є якась умовність, але це дійсно тільки лише умовність.
До відносних одиниць належать:
- em (кегельна)
- x-height (ex)
- px (пікселі)
Відсотки (%) - завжди величина, про яку варто говорити окремо. Вона настільки важлива, що W3C виніс її в окрему колонку. Тобто% можна писати не у всіх правил, а тільки у деяких і коли ми пишемо% ми повинні розуміти від чого вони вважаються.
Піксель - це найдрібніша точка, яку можна встановити на екрані комп'ютера.
Чому піксель відносна величина? Ми беремо фізичний монітор, у якого є діагональ - це реальна фізична величина. Але ж ми можемо поставити на ньому дозвіл будь-який, правильно? Залежно від вказаної нами роздільної здатності, кількість пікселів може змінюватися. Ось чому піксель - відносна величина. Тобто на різних моніторах px має різний розмір.
Одиниця em посилається на розмір стандартного шрифту, встановленого в глобальних параметрах браузера.
На таблиці позначення окремих важливих розмірів шрифтів. Велика їх частина нам не знадобиться, але деякі потрібно знати.
Під цифрою 4 позначена базова лінія елементів шрифтів, а під цифрою 13 - font-size, em. Так ось, em - це розмір шрифту, який визначається висотою заголовної букви і розміри виносних елементів зверху і знизу (вгорі можуть з'явитися діакритичні знаки, наприклад: е або й).
А що таке їх? Це висота рядкової літери. Під цифрою 3 в таблиці так і написано. Для різних шрифтів це співвідношення має різну величину. Але не всі браузери підтримують таке співвідношення.
Наприклад: компанія Microsoft запропонувала вважати 1em = 2ex для всіх типів шрифтів. Саме через те, що ex в різних браузерах може бути різним, краще в роботі його не використовувати. Деякі браузери дійсно вважають ex правильно, а деякі, як IE в половину від em. А в реальності він може бути 0.46, на маленьких шрифтах така невідповідність непомітна, а на великих буде істотна відмінність.
Тепер з приводу використання на сайтах pt, pc, in.
Якщо ми розмір елемента на сайті вкажемо в pt, він все одно від чогось буде братися. Так як же браузер вирішує цю проблему?
На зорі розвитку комп'ютерної техніки, розміри моніторів були невеликих діапозонів. І компанія Microsoft запропонувала взяти для визначеності 96px = 1in і таким буде у нас дозвіл наших пристроїв.
1in = 96px
А Apple сказав ні:Давайте будемо орієнтуватися на поліграфістів і візьмемо:
1in = 72pt
Але на практиці вийшло наступне: чим менше дозвіл, тим менше є можливість розмістити там інформацію.
Тому Apple передумала і зробила 1in = 96px, але це все повна дурниця, оскільки реальна фізична роздільна здатність ваших пристроїв коливається приблизно від 60 - 600px/in.
Але як і раніше величина 96 є визначальним для перерахунку. Це означає, що якщо написати розмір 10pt, то браузер зробить наступне: 96 / 72 * 10. Ось така історія при перерахунку pt в px.
На практиці я не раджу на моніторах використовувати абсолютні одиниці. На моніторах це взагалі не має ніякого значення, а ось при друку бажано, якраз їх те і використовувати. Під час друку потрібно дбати про те, щоб все виводилося в pt.
