Zápis délky

Použitelné délkové jednotky jsou px, mm, cm, in, pt, pc, em a ex. Jejich detaily rozeberu níže. Chcete-li zadávat desetiny, oddělujte tečkou (jak je zvykem v anglosaském světě), nikoliv čárkou (jak je zvykem u nás v Rakousko-Uhersku). V CSS se mezi číslem a značkou jednotky nedělá mezera. Například:

Pokud mezi číslem a jednotkou uděláte mezeru nebo náhodou uvedete délku bez jednotky jenom jako číslo, je to chyba. Prohlížeč ve striktním režimu to vyhodnotí jako chybu a zápis bude ignorovat. Internet Explorer v quirk módu interpretuje hodnoty bez jednotek jako pixely. (Mimochodem v češtině je to jinak, v českém testu se správně před jednotkou mezera dělá.).

Pixel

Základní délkovou jednotkou je pixel, což je obrazovkový bod. Zapisuje se px.

• V HTML (ne v CSS) se všechny rozměry (kromě procent) udávají v pixelech.
• Oproti tomu v CSS se pixely vždy musejí zapsat s jednotkou px (bez mezery před).

Příklad:

Jestli si pixel jako délku neumíte představit, tak vězte, že obrazovka má na šířku něco kolem 1000 pixelů nebo víc. Pixely jsou ta čísla, která se ve Windowsech nastavují ve vlastnostech plochy jako rozlišení obrazovky. Chcete-li pixel vidět, podívejte se na bílou část obrazovky lupou, dá se tam rozeznat taková jako mřížka. Světlé body mezi tmavší mřížkou jsou pixely, jsou od sebe vzdáleny jeden pixel (ve skutečnosti je ta tmavší mřížka tvořena modrou složkou pixelu, ta světlá část pixelu je červená a zelená složka).

Absolutní jednotky

Značky mm, cm, in, pt a pc představují normální rozměry známé z reálného světa. Nijak ale není dáno, jak se tyto jednotky zobrazí v konečném efektu (například existují různá rozlišení obrazovek), podle mých zkušeností fungují přesně jenom při tisku (takže zas tak „absolutní“ to není).

Značka	Název	Převod	Počet px
mm	milimetr		1mm = 3.78px
cm	centimetr	1cm = 10mm	1cm = 37.8px
in	palec (inch)	1in = 2,54cm	1in = 96px
pt	typografický bod	72pt = 1in	3pt = 4px *
pc	pica nebo též cicero	1pc = 12pt , 6pc = 1in	1pc = 16px

Typografické jednotky pt a pc se odvozují od anglického palce. V běžném životě se s nimi nesetkáte, ale například pt je ta jednotka, ve které se udává velikost písmen v textových editorech typu Wordu.

* Převod pt na pixely je závislý na nastavení systémového zobrazení. Normálně jsou monitory nastavené na 96 dpi (96 px na palec), což při 72 pt na palec dává vztah 3pt = 4px. Uživatel si může dpi monitoru změnit (např. ve Windows Ovládací panely > Zobrazení > Nastavení > Upřesnit > Velikost písma > jiný, 100% pak odpovídá 96 px), potom poměr 3pt = 4px nemusí platit. (Za osvětlení problematiky děkuji Zubanovi.)

Doporučení: vyberte si jednu „oblíbenou“ jednotku a všechno uvádějte v ní. Časem se velmi dobře naučíte, jak je velká a co v ní máte jak zadat. Doporučuji samozřejmě pixel.

Relativní jednotky

Značka	Název	Význam
em	eM, čtverčík	šířka velkého písmena M
ex	eX	výška malého písmena x

Jednotky em a ex mění svou velikost v závislosti na aktuální velikosti písma. Aktuální velikost písma může být ovlivněna jednak nadřazeným nastavením stylu font-size), formátovacími značkami (<big> a pod.) a také volbou uživatele. Většina prohlížečů umožňuje nastavit velikost zobrazovaného písma (zobrazit / velikost textu). To je i základní význam těchto jednotek — umožňují design, který se při změně tohoto nastavení nerozsype. (Jiná metoda je zadat všechna písma absolutně, to ale uživatele s Explorerem akorát oprudí, protože to pak nejde zvětšovat na čtení.)Jiné použití je u obtékaných obrázků: pokud chcete, aby obrázek byl vysoký stejně jako tři řádky, zadáte k obrázku style=“height: 3em“. Určitě existují další použití, na která ale přijdete až ve chvíli, kdy je budete potřebovat.

Pro standardní písma a Internet Explorer platí 1em = 2ex, v NN je trošku obé trochu větší, přičemž 1em > 2ex, v Mozille nevím. Uvedený poměr se může lišit nejen v závislosti na prohlížeči, ale hlavně v závislosti na použitém písmu (font-family).

V moderních designech se velmi často používá jednotka em. Jednotku ex jsem v praxi používat moc neviděl. Existuje i jednotka en (půlčtverčík, šířka písmene n), která je ale nestandardní a divně podporovaná.

Procenta

S procenty je v CSS trochu zmatek, ale dá se to pochopit. Zápis vypadá jako u obyčejných jednotek: width: 20% třeba (mezi číslem a % není mezera). Jediným problémem je to, jak se budou procentuální hodnoty interpretovat. Jde prostě o to, z čeho jsou to procenta.Na tuto otázku obecná odpověď neexistuje. U každé vlastnosti je tomu jinak. V mnoha výčtech vlastností a hodnot CSS je sloupeček „interpretace procent“, ve kterém se nalézá pokus o specifikaci.

Naštěstí existují ale jenom tři základní interpretace, které jsou ve většině případech stejně shodné. Procenta se počítají buď

• z přirozených rozměrů elementu (týká se pouze písma a výšky řádku),
• z rozměrů rodičovského elementu (třeba buňka tabulky, div),
• nebo ze šířky stránky a výšky okna,

což, jak jistě chápete, je v mnoha případech totéž. Složitější zanořené případy se stejně musejí odzkoušet. Takže procenta zadávat doporučuji, je to mnohdy velké ulehčení. Například zadávání velikosti písma procenty je v podstatě jediná možnost, jak mít písmo stejně velké v různých prohlížečích.