pondělí 10. srpna 2009

Velikost písma HTML díl 1.

Nastavení velikosti písma pomocí CSS a jeho konečné řešení

Jelikož je ohledně nastavení písma v CSS mnoho dohadů, každý webmaster jiný názor, rozhodl jsem se popsat jak to je doopravdy.
Takže nejprve malá rekapitulace technického problému:

Písmo můžeme pomocí CSS nastavovat pomocí:

  1. absolutně (absolutními jednotkami) - nejčastěji pixely px, ale táké body pt, mm, cm, in (palec = 2,54 cm), pt (1/72 palce), pc (pica = 1/6 palce)
  2. relativně (relativními jednotkami): - ex (oproti výšce malého písmene x), em ( oproti šířce velkého písmene M), nebo v %
  3. pomocí klíčových slov - xx-small, x-small, small, medium, large, x-large, xx-large
Důležitým technickým detailem je, že každý prohlížeč trochu zobrazuje písmo jinak a s tím je potřeba počítat. Je běžným zvykem nekotrolovat zobrazení písma pouze v prohlížečích Firefox, ale také alespoň v Internet Explorer, ale také v Opeře, Mozilla, Safari, Konqueror, Google Chrome.

Například Internet Explorer má výchozí velikost písma o jeden řád větší, než Firefox či Mozilla.

Dále také verze CSS1 má jiné přednastavení, než verze CSS2.

Takže jak na to:

Obecně je teď pravidlem nepoužívat absolutní jednotky písma, jelikož si uživatelé, zejména zrakově postižení, nemohou nastavit velikost písma, tak jak jim vyhovuje. Pokud ovšem absolutní nastavení použijete, je to tak naprosto v pořádku, jinak by také tyto jednotky neexistovali, pouze se řadíte mezi programátory "sparťany", kteří jsou názoru, že kdo to nepřečte, nemá to co číst. Také nedodržujete pravidla přístupného webu, které jsou ovšem povinné pouze pro některé stránky, jako jsou například státní weby. Takže si lehké diskriminování v klidu užívejte.

Pokud použijete pro nastavení px tedy pixely (malé čtverečky, ze kterých je složen obraz na monitorech) jsou různě velké nejem na různých zařízení, ale také na různých prohlížečích.
Ale i toto je v také pořádku, pokud je vaším záměrem, aby se písmo zobrazovalo odlišně.

Pokud se rozhodnete používat pouze klíčová slova xx-small, x-small, small, medium, large, x-large, xx-large, bude mít narosto rozdílné výsledky na různých zařízení, ale na druhou radost, že jste členy naprosté menšiny. Už jenom rozdíly mezi CSS jsou zarážející, například.

Klíčové slovo
Velikost vůči normálnímu písmu
CSS 1 CSS 2
xx-small 30% 58%
x-small 44% 69%
small 67% 83%
medium 100% 100%
large 150% 120%
x-large 225% 144%
xx-large 338% 173%


Tvůrci této normy byli rozhodně asi inženýři. :)

Druhý díl

Žádné komentáře:

Okomentovat