Jednostki miar – rozmiary i skale
Wielkości w CSS można wyrażać za pomocą jednej z dziewięciu jednostek:
- % — procent
- em — em, firet, stopień pisma
- ex — wysokość x dla danego kroju pisma (x-height)
- pc — pica
- pt — punkt (point)
- px — piksel (pixel)
- in — cal (inch)
- mm — milimetr
- cm — centymetr
Wszystkie jednostki można podzielić na bezwzględne (niezależne, sztywne) oraz względne, zależne od użytego kroju, stopnia pisma oraz rozmiarów elementów nadrzędnych.
Jednostki względne
Jednostki względne nie określają bezpośrednio wymiaru, lecz skalę. Doskonale nadają się do określania rozmiaru elementów na ekranie. Pozwalają na dynamiczną zmianę rozmiaru, bez zmiany wyglądu strony. Wielkości krojów pisma do wyświetlania na ekranie powinny być mierzone właśnie w jednostkach względnych. Dla elementów dla wydruku, należy stosować jednostki bezwzględne, aby wydruk wyglądał tak samo na każdej drukarce.
Rozmiar wyrażony w jednostkach względnych jest zależny od rozmiaru elementu nadrzędnego, określany jako stosunek rozmiaru elementu do rozmiaru elementu nadrzędnego.
% — procent
Wielkości wyrażane w procentach są najbardziej uniwersalne. Pozwalają na najłatwiejsze określenie proporcjonalnego rozmiaru. 100% oznacza domyślną wartość, 200% wartość dwukrotną, 50% połowę itd.
em — firet, stopień pisma
1 em = wysokość stopnia pisma
em to jednostka względna, zależna od wysokości stopnia pisma (rozmiaru czcionki). 1 em ma długość równą stopniowi pisma (rozmiarowi czcionki).
Jest to jednostka idealnie nadająca się do określania parametrów tekstu takich jak: stopień pisma, wielkość interlinii, odstępów międzywyrazowych i międzyliterowych, a w szczególności atrybutów odnoszących się do szerokości znaku. Użycie em gwarantuje zachowanie odpowiednich proporcji kroju w każdej skali.
ex — wysokość x (x-height)
1 ex = x (wysokość małej litery bez wydłużeń)
ex to jednostka względna, zależna od wysokości małych liter w danym kroju. 1 ex ma długość równą wysokości małych liter (bez wydłużeń dolnych) w danym kroju (np. litera „x” — stąd nazwa x-height ).
Jak widać, wielkość ex jest zależna od rodzaju użytego kroju. Każdy krój ma inny stosunek wysokości dużych liter do małych. Średnio ten stosunek wynosi 1:2
Przykładowe wysokości x w popularnych krojach:
- Comic Sans — 0,54 em
- Georgia — 0,5 em
- Times New Roman — 0,46 em
- Trebuchet MS — 0,53 em
- Verdana — 0,58 em
Jednostki bezwzględne
Jednostki bezwzględne, to tradycyjne jednostki, które ustawiają wymiary na sztywno, tak, aby element mierzony linijką miał dokładnie zadany rozmiar. Ten rodzaj jednostek jest przeznaczony przede wszystkim do określania rozmiaru elementów na wydruku.
Dla rozmiarów tekstu na ekranie (stopnia pisma, interlinii, odstępów) powinno się stosować wartości bezwzględne, umożliwiając użytkownikowi proporcjonalne powiększenie lub zmiejszenie tekstu.
px — piksele
Piksel to jednostka zależna od rozdzielczości urządzenia. Rozmiar piksela zależy od rozdzielczości urządzenia (ekranu, drukarki itp.). Rozmiar określony w pikselach nie zależy od rozmiaru innych elementów. W3C zalicza piksele do jednostek względnych.
Rozmiaru tekstu nie określa się w pikselach.
Najczęściej spotykane zastosowanie tej jednostki to określanie położenia elementu na elementach, które mają stałą wielkość w pikselach (np. pozycjonowanie absolutne na bitmapach).
Tradycyjne typograficzne jednostki miar (bezwzględne)
pt — punkt
- 1 pt = 1/72 in (1/72 cala)
pc — pica
- 1 pc = 1/6 cala
Pica to anglosaska jednostka typograficzna, popularna na całym świecie.
Tradycyjne jednostki długości
mm — milimetr
- 1mm = 1/1000 m
- 1 mm = 1/10 cm
- 1 mm = 0,03937 cala
- 25,4 mm = 1 cal
cm — centymetr
- 1 cm = 1/100 m
- 1 cm = 10 mm
- 1 cm = 0,3937 cala
- 2,54 cm = 1 cal
in — cal ()
- 1 cal = 2,54 mm