Pixynergia

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/Me­dium/Larger/Lar­gest), 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.

---