Opravy chyb webmasterů:Rozdílná velikost písma

Z MDC

Při prohlížení některých webových stránek v prohlížeči se zobrazovacím jádrem Gecko (Mozilla, Firefox, Netscape, K-Meleon aj.) můžeme zjistit, že mají nápadně malé písmo, zatímco v MSIE je vše v pořádku. Znamená to, že jsme opět narazili na některou interpretační chybu v MSIE. Chyby jsou v zásadě dvě. Klíčová slova

Když definujeme v CSS velikost písma, můžeme použít tři typy zápisu:

1. absolutní jednotky - např. body (pt), chybně ale také pixely (px).
2. relativní jednotky - em, ex, ale také procenta.
3. klíčová slova - x-small, medium apod.

Chyba způsobená klíčovými slovy je charakteristická právě tím, že v prohlížečích s jádrem Gecko je při použití klíčových slov písmo zhruba o jeden řád menší, než v MSIE. Příčiny problému s klíčovými slovy jsou dvě (v závislosti na zápisu CSS).

1. MSIE a Gecko používají sice stejnou velikost písma jako výchozí, ale MSIE má stupnici posunutou o jeden dílek výš.
2. Každé klíčové slovo je jen zástupným pojmem pro konkrétní velikost určenou koeficientem vůči základní velikosti. Při převodu mezi jednotlivými velikostmi jsou však používány různé koeficienty (1.5 pro CSS 1 a 1.2 pro CSS 2).

Proto dochází k chybnému zobrazení velikostí písma. Na tento problém existuje speciální hack, který je popsán na webu A list apart. Rozumnějším řešením je však klíčová slova k definici velikosti písma vůbec nepoužívat.

[editovat] Chybné dědění

Špatná velikost písma v důsledku dědění se projevuje při používání tabulek a relativních jednotek velikosti písma. MSIE obsahuje chybu, kdy obsah tabulky nezdědí velikost písma z nadřazeného prvku. Co si pod tím představit? Mějme následující definice: CSS:

body {
    font-size: 90%;
}

table {
    font-size: 75%;
}

A jak je budou prohlížeče intepretovat?

• MSIE zobrazí písmo v tabulce velikosti 75 %
• Moderní prohlížeč ovšem zdědí velikost z těla dokumentu, takže vypočítá 75 % z 90 %. Zobrazená velikost písma tedy bude 67,5 %.

I na tento problém však řešení existuje. Pokud používáte absolutní jednotky, je velice jednoduché. Stačí, když určíte velikost písma i tabulce a jejím buňkám a nebudete se spoléhat, že element správnou velikost zdědí. Při používání relativních jednotek je situace komplikovanější, neboť tam dochází vždy k přepočtu velikosti ze zděděné velikosti (14px ze 14px je stále 14px, zatímco 80 % z 80 % je 64 %). I tento problém však pečliví autoři zvládnou a podaří se jej eliminovat i pro relativní velikosti písma.

Poznámka: Měli bychom se vyhnout definicím pomocí absolutních velikostí, neboť uživatel prohlížeče MSIE nemůže změnit takto určenou velikost písma. Kvůli zneužívání absolutních jednotek některé prohlížeče dokáží měnit i takto definovanou velikost písma. Pokud se na absolutní jednotky webmaster spolehne, může se zvětšení písma na vzhledu jeho stránky neblaze projevit. Proto je lepší nepoužívat absolutní jednotky a počítat s možností zvětšovat písmo.

[editovat] Související odkazy

• Care With Font Size (w3.org)
• CSS units (w3schools.com)
• CSS Font-size property (w3schools.com)