Způsob zobrazení písma použitého na HTML stránce určuje primárně
webový prohlížeč. Ten má ve své konfiguraci přednastaven základní typ a
velikost pro obyčejné písmo, má definováno, zda nadpisy různých
úrovní mají být 1×, 1,2×, 1,5×, 2× nebo 3× větší než toto
základní písmo, jakým stylem se zobrazují odkazy atd. To je základní
způsob zobrazení všech HTML dokumentů (WWW stránek). Již drahnou dobu je
ovšem možné k těmto dokumentům připojit definici stylů (v jazyce CSS),
kde lze předefinovat vzhled kterékoli části stránky, včetně stylu a
velikosti písma, o níž teď půjde především.
CSS pro definice rozměrů objektů a velikostí písma používá několik
jednotek. Jsou dvou typů:
- absolutní jednotky, které mají oporu ve
standardizovaných jednotkách. Výsledek má mít přesně daný, měřitelný
rozměr – pokud v CSS nadefinuji, že box bude 10 cm vysoký, má takový
být na displeji PDA, vytištěný na papíře i na 100metrovém projekčním
plátně.
- mm – milimetr
- cm – centimetr
- in – palec (inch); 1 in = 25,4 mm
- pt – typografický bod; 1 pt = 1/72 in =
0,3528 mm
- pc – pica (typografická jednotka); 1 pc = 12 pt =
4,2333 mm
- relativní jednotky, které se vztahují k jiným
rozměrům či použitému zobrazovacímu zařízení. Výsledek tedy může
být za různých podmínek různý.
- em – 1 em odpovídá platné velikosti písma v daném
kontextu. Vychází-li tam, kde použiji jednotku em, velikost písma
13 pt, bude 1 em znamenat právě 13 pt. Pokud to vyjde 4 metry, bude zde
1 em znamenat čtyři metry.
- ex – jednotka významem podobná em, také
vychází z platné velikosti písma. Pro zjednodušení postačí říct, že
ex je zhruba polovina em (což tak některé prohlížeče
ostatně stále interpretují, ačkoli je to jinak a poněkud
složitější).
- px – pixel. Měl by to být nejmenší rozlišitelný
obrazový bod, který je vnímán stejně velký (v dohodnuté subjektivní
velikosti) na různých zobrazovacích zařízeních. Na papíře, který se
čte zblízka, tak vychází asi 0,2 mm, na obrazovce počítače asi 0,27 mm;
na televizi sledované z 3,5 metru už to dělá asi 1,3 mm, na plátně
sledovaném z 10 metrů pak kolem 4 mm. Na počítači se pro zjednodušení
obvykle ztotožňuje s bodem obrazovky.
Pochopitelně v CSS můžeme použít libovolné jednotky současně,
můžeme je míchat a střídat. Text článku může být nadefinován velký
12 pt, mezititulek 1.5 em a hlavní nadpis 36 px. Proč ne. Prohlížeč při
vykreslování přepočítá rozměry na body výstupního zařízení a pouze
použije pro každou část textu jiný algoritmus. Kvůli odlišným definicím
použitých jednotek se může stát, že nejen výsledná absolutní velikost,
ale i vzájemný poměr takto rozdílně definovaných textů se bude lišit na
různých výstupních zařízeních – zatímco 12 pt má být vždy a
všude stejně velkých, 36 px bude na plátně třeba 20× větší než na
papírovém výtisku; změní-li se výchozí objekt, z něhož je počítaná
velikost 1 em, změní se i odvozená velikost mezititulku, zatímco
základní text bude stále stejně velký 12 pt atd. Ale na jednom
konkrétním zařízení bude vykreslená stránka stejná a velikosti všech
textů dané jednoznačným převodem relativních jednotek na absolutní
rozměry.
Zvětšování písma vs. zoom
Již mnoho let je v prohlížečích k dipozici funkce
Zvětšit/Zmenšit písmo. Umožňuje nám zvětšit či zmenšit
najednou všechny texty na celé stránce – zobrazit je jedenapůlkrát,
dvakrát, čtyřikrát větší, resp. menší než obyčejně. A protože se
všechny zvětšují/zmenšují stejným koeficientem, zůstávají vzájemné
poměry textů na stránce stále stejné. Pokud byl nadpis článku dvakrát
větší než jeho text, platí to stále i po celkovém zvětšení či
zmenšení.
Jak už bylo řečeno výše, jednotky použité pro definování velikosti
písma se použily pouze pro původní vykreslení a ovlivňují nanejvýš jen
vzájemné poměry různých úseků textu na stránce – ale to, jak velké
to bude všechno jako celek, může ovlinit právě dodatečná funkce
Zvětšit/Zmenšit písmo. Pouze v Microsoftu se kdysi rozhodli
(z mně dosud neznámých důvodů), že z tohoto algoritmu vynechají texty
definované jednotkou px. Takže ačkoli Internet Explorer (IE)
umožňuje zvětšit/zmenšit písmo celé stránky, u textů, jejichž
velikost je v CSS definovaná v px se změna velikosti neprojeví a
zatímco vše kolem se může zvětšovat/zmenšovat dle libosti, tyto texty
zůstanou trvale v původní velikosti. Toto chování nemá žádnou logiku a
Microsoft je za ně dlouhodobě a soustavně kritizován odbornou veřejností.
Přesto zůstalo zachováno i v nejnovější verzi IE 7. Tento nesmyslný
algoritmus IE je ostatně hlavní příčinou toho, že se jednotka px
přestala prakticky používat a odborníci doporučují raději používat
procentní a relativní velikosti písma (jednotkou em), mnohé normy
vymezující požadavky na WWW stránky z hlediska použitelnosti a
přístupnosti pak použití px pro velikost písma přímo zakazují.
Kvůli jedné podivné manýře Microsoftu.
Nicméně změna velikosti písma je užitečná, především jeho
zvětšení na stránkách, které jsou zobrazeny pro nás příliš drobným
písmem. Má ale také jisté nevýhody. Tou hlavní je to, že při zvětšení
písma se všechny bloky textu přeformátují – s jinou velikostí písma
se posunou hranice zlomu řádek, texty, které se přesně vešly do
vymezeného prostoru se tam rázem nevejdou, texty se mohou překrývat apod.
Proto je někdy výhodnější použít zvětšení/zmenšení celé stránky,
pomocí tzv. lupy. Stejný postup se používá i v jiných aplikacích,
známe ho z Wordu, čtečky PDF a dalších. Stránka se zvětší jako celek,
poměrně všechny její části, texty, bloky, objekty, čáry; jako bychom se
na stránku podívali pod lupou. Pokud je obsah stránky vektorový (obvykle
písma, případně SVG a některé Flash objekty), je to velmi užitečné a
při dostatečně velké obrazovce se takto dá používat prohlížeč trvale
(zoom zvětší i rozměr „sazebního obrazce“ stránky, takže je potřeba
i víc místa, větší okno, případně se musí použít i vodorovné
scrollování). Ale většina grafiky ve stránkách je bitmapová a při
zvětšení se zvětšují i její pixely. Grafika stránky a vložené
obrázky se stávají zubatými a od určité velikosti se na to už nedá moc
dívat. Všechno má svá pro a proti.
Jedním ze skutečných vylepšení MSIE 7 je přítomnost takovéto lupy, a
to aniž by prohlížeč upustil od možnosti upravit pouze velikost textu
(bohužel textů definovaných v px se to stále netýká). Změnu
velikosti textu najdete v menu přibližně na původním místě (najdete-li
ovšem to menu; Page → Text Size →
Smallest/Smaller/Medium/Larger/Largest), celostránkový zoom/lupa pak
přibyl na sousední položce (Page → Zoom) a najdete ho i v pravém dolním
rohu okna prohlížeče.
Zmínit je potřeba i zoom/lupu na systémové úrovni. Pokud je taková
funkce dostupná, speciální obdobná funkce v prohlížeči už postrádá
smysl. Např. v Mac OS X lze zvětšovat celou obrazovku kolečkem myši (při
stisknutém Ctrl), systémový prohlížeč Safari tudíž už další zoom
neposkytuje, protože by stejnou funkci dělal podruhé. Systémová lupa ve
Windows XP pro tyto účely není příliš dobře použitelná a samostatná
funkce zoom v prohlížeči IE je proto rozhodně přínosem.
Zoom vs. em-layout
S předchozím rozdílem mezi zvětšováním písma a zoomem celé stránky
souvisí ještě jedna nuance, přesněji řečeno technika stylování CSS.
Nazývá se pružný, elastický, gumový nebo také
em-layout (či design) – podle jednotky em, která
se při tom využívá. Trik spočívá v tom, že se rozměry prvků stránky
(či aspoň šířky hlavních sekcí a sloupců) definují pomocí jednotky
em. Ta je, jak řečeno výše, odvozena od aktuální velikosti
písma, takže rozměr „sazby“ přímo zavisí na použité velikosti
písma. Pokud si uživatel písmo v prohlížeči zmenší, zmenší se
i odvozené objekty, pokud si písmo zvětší, zvětší se i sazba. Autor
stránky má vhodným použitím relativních jednotek v CSS možnost určit,
které rozměry mají růst/zmenšovat se společně s velikostí písma, a
které mají zůstat neměnné.
Vyzkoušet si to můžete i na tomto blogu. Šířka hlavního sloupce je
definovaná pomocí em, takže pokud zde používáte výchozí CSS a
v prohlížeči si zvětšíte/zmenšíte písmo, přizpůsobí se mu i tento
sloupec. Je tím zajištěno, že šířka sazby je vždy taková, aby se do ní
vešel přibližně stále týž určený počet znaků; nemůže být příliš
úzká ani příliš široká. Stačí měnit velikost písma a přizpůsobíte
si i celý layout stránky, aniž by se nehezky deformovaly bitmapy,
které při tomto „zoomu“ zůstavají netknuté. Šířku druhého, úzkého
sloupce jsem (už ani nevím proč) definoval v px, takže ta
zůstává při změně velikosti písma konstantní.
Nedá se určit, která metoda je lepší, různým lidem za různých
okolností vyhovuje vždy něco jiného. Chci-li si jen zvětšit písmenka,
protože mi text připadá příliš malý a špatně se mi čte, je ideální
pouhé zvětšení písma. Mám-li výrazně slabší zrak a hůře vidím
i obrázky a grafické symboly na stránce, bude pro mě asi výhodnější
lupa. Mám-li velké rozlišení obrazovky a stránky vidím jako úzké nudle
s miniaturními písmenky, je asi nejvýhodnější zvětšené písmo
s dobře navrženým em-layoutem, díky němuž si spolu s písmem
zvětším i celou stránku (aniž bych zvětšoval použité bitmapové
obrázky). Každá situace chce své a každé z uvedených řešení má své
místo, někdy je lepší to, jindy ono. Hlavní je mít možnost volby.
Ovšem pro to hloupé znemožnění zvětšit si v IE písmo definované
v px jsem ani při nejlepší vůli žádný užitek nenašel.
