ARCHIV

CSS (6.) - Písmo I. (Velikost písma)

V dnešním díle se seznámíme, jak je možné nastavit pomocí kaskádových stylů velikost písma.

23.8.2004 13:00 | Vasek | Články autora | přečteno 21363×

Formátování textu pomocí CSS nám nabízí stejné možnosti, které poskytuje html tag <font>, a navíc je k dispozici mnoho dalších vlastností, které prostředky HTML nebylo možné vůbec popsat.

Velikost písma

Velikost písma se určuje vlastností font-size. Jako její hodnota se používají klíčová slova nebo číselné hodnoty s jednotkou, případně procenta.

Pro absolutní velikosti má klient definovanou tabulku velikostí písem. Specifikace CSS2 doporučuje klientům sestavit tuto tabulku tak, aby koeficient mezi jednotlivými stupni velikosti písma pro počítačovou obrazovku činil 1,2 (např. pokud je velikost písma medium rovna 12,2pt, tak velikost písma large má být 14,4pt). Jelikož se jedná jen o doporučení a v předcházející specifikaci CSS1 byl tento koeficient 1,5 (jež je vnímán jako příliž veliký), nelze se na to spoléhat. Pokud není velikost písma deklarována vůbec, použijí prohlížeče výchozí hodnotu medium.

Relativní velikosti (larger a smaller) jsou interpretovány jak vůči klientské tabulce velikostí písma, tak i vůči velikosti písma rodičovského prvku. Pokud měl rodičovský prvek velikost písma medium hodnota larger nastaví jeho velikost písma na large.

Podpora v prohlížečích

Současně používané prohlížeče obsahují několik chyb a odlišností v implementaci CSS, ačkoliv se na první pohled zdá, že tuto vlastnost podporují všechny bez větších problémů.

IE4 a NN4 zvládají bez problémů jen velikosti písem nastavených v pixelech (px). Absolutní velikosti (small, medium, large atd.) se zobrazují nepředvídatelně, a procentuální hodnoty jsou většinou nesprávně interpretovány jen z výchozí hodnoty (nikoliv z rodičovského prvku). Jednotku em interpretuje IE3 jako pixel (px).

Určování velikostí písem v pixelech činí problémy s čitelností stránek pod IE/Win, jelikož písmo nelze snadno uživatelsky zvětšovat. Absolutní velikosti určené pomocí klíčových slov (small, medium, large atd.) způsobují problémy ve starších verzích IE/Win, jelikož až do verze 5.5 (a i ve verzi 6 v režimu zpětné kompatibility, jež je zapnut vždy když není definován striktní typ dokumentu) zobrazuje písmo vždy o stupeň větší tj. xx-small jako x-small, x-small jako small, small jako medium atd.

Podpora ostatními prohlížeči: Mozilla (Netscape 6+) plná podpora všemi verzemi; Opera plná podpora od verze 3; IE 5/MAC plná podpora; Konqueror plná podpora.

Pokud chcete mít na stránce stejně veliké písmo v libovolném prohlížeči (v nestandardním řežimu {většinou Explorer} i standardním režimu) a také s možností jeho zvětšení, lze provést mnoho hacků, které to umožní. Jeden z nich je následující: použít uvozovky, které prohlížeč ve standardním režim ignoruje. Např. tohle bude mít ve většině případů 16 pixelů:

p {font-size: medium}
p {font-size: "small"}

Princip tohoto hacku spočívá v uvedení obou dvou předcházejících řádků pro definici velikosti písma jednoho prvku. Prvnímu řádku rozumí standardní i nestandardní režim prohlížeče a nastaví podle toho velikost písma. Druhému řádku s uvozovkami prohlížeč ve standardním režimu nerozumí, a proto jej ignoruje, kdežto prohlížeč v nestandardním režimu tomuto zápisu rozumí, a jelikož ho dostal jako druhý, přenastaví velikost písma podle této definice. Prohlížeč v nestandardním režimu automaticky zobrazuje písmo o velikost větší, což v našem případě je požadované medium.

Příklady velikostí

Závěr

V dalších dílech si postupně probereme další vlastnosti písma v kaskádových stylech.

Verze pro tisk