O velikosti písma v prohlížečích, zvětšování a zoomování [příspěvek v archivu]

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.


Pozn.: Impulsem k napsání tohoto příspěvku byl článek na Lupě Velikost písma v moderních prohlížečích, vycházející z mylných předpokladů a obsahující několik zásadně chybných informací.

Petr Staníček, 24. 4. 2007 v 16.48 • Rubrika: IT, Webdesign60 komentářů u textu s názvem O velikosti písma v prohlížečích, zvětšování a zoomování

10 komentářů k článku »O velikosti písma v prohlížečích, zvětšování a zoomování«

[1] Vložil(a): dgx 26. 4. 2007 v 14.49

[50] sice není to žádné hogofogo s rozhraním a podporou pro kolečko myši, ale zde je:

javascript:vo­id(window.paren­t.document.bo­dy.style.zoom=‚150%‘)

I se zdrojákem! Můžeš si ho uložit do oblíbených ;)

[2] Vložil(a): dgx 26. 4. 2007 v 14.50

(ale bez té typografie, fucking texy…)

javascript:void(window.parent.document.body.style.zoom='150%')

[3] Vložil(a): Jiří Sekera 27. 4. 2007 v 22.33

[45] Domnívám se, že „je relativní“ je v souvislosti s pixely relativní. :) To přeci musíš sám cítit, že relativita pixelů je na úplně jiné bázi než u čtverčíků nebo procent. Navíc si v článku sám napsal, že pokud nadefinuji nadpisu velikost 10 cm, má mít všude velikost 10 cm i kdyby trakaře padaly. Proč by to mělo být u pixelů jinak?

Myslím, že lepší by bylo zabývat se autory, kteří používají absolutní nebo relativní jednotky, kam nepatří. Například definovat tiskové styly jinak než v tiskových bodech (nebo v pixelech v souvislosti s pixelovou grafikou) je podobně ortodoxně-zvrhle-lepší-než-nejlepší jako se dřív při nástupu CSS layoutů snažili „ti co nepochopili“ o tabulku jen z divů.

[4] Vložil(a): Pixy 27. 4. 2007 v 23.17

[53] Ty poslední dva odstavce ve [45] jsou neviditelné, nebo co? Tobě se to z nějakého důvodu nezobrazilo, že reaguješ, jako kdybych tam vůbec nenapsal třeba větu „Není to úměrná či závislá veličina jako em či %, je relativní jiným způsobem, ale relativní je“?

[5] Vložil(a): Jiří Sekera 28. 4. 2007 v 12.41

[54] No to, že je relativní jiným způsobem, respektive absolutní v rámci jednoho výstupního zařízení, je ale důležité. Velikost bitmap je v rámci zařízení taky absolutní a pokud jsou v nějakém vztahu, proč je jeden z pixelů víc relativní než ten druhý?
Pokud bys to chtěl brát do extrému (prosím brát hodně s rezervou), tak metr na zednickém, krejčovském a rýsovacím pravítku taky nemusí být úplně stejný (i když dnes už to asi tolik nehrozí jako dřív).

[6] Vložil(a): awery 6. 5. 2007 v 19.57

[54] Ježíš, proč tak zhurta? Vždyť má svým způsobem pravdu. Spíš mám pocit, že si jen nerozumíte. S DGX sis to už vyjasnil (problém je v tom, že IE písma nezvětšuje), ale ostatním jsi ponechal zamotanou hlavu. Zeptám se tě ještě z jiného konce a snad se to tím posune dál. Pro ilustraci – na stránce jsou dvě písmena: první má definovanou velikost 1cm, druhé 50px. Jak by se měl podle tebe zachovat prohlížeč, když mu přikážeš zvětšit písmo? Zvětší i to písmeno definované centimetry?

[7] Vložil(a): Pixy 6. 5. 2007 v 21.20

[56] No pochopitelně, že se má zvětšit každé písmeno. Já jako uživatel žádám prohlížeč, aby mi zobrazil stránku řekněme dvakrát větším písmem. Nezajímá mě, jestli autor definoval pomocí centimetrů nebo pixelů. To zajímá prohlížeč při základním vykreslování. Ale jestli uživatel řekne, že chce dvakrát větší písmo, tak se má zobrazit dvakrát větší písmo, nikoli vybírat selektivně podle použitých jednotek.

Když mám písmeno velké 1cm (resp. 50px) a chci ho zobrazit dvakrát větší, tak očekávám, že se mi zobrazí velké 2cm (resp. 100px). Vy ne?

[8] Vložil(a): pa3k 7. 5. 2007 v 16.08

[57] Samozrejme. Z hľadiska použiteľnosti to ani inak byť nemôže.

[9] Vložil(a): lynn 24. 5. 2007 v 16.03

[29] To je jednoduchý, čtu pixy.cz ;-) Logické.

[10] Vložil(a): crook 26. 9. 2007 v 11.17

Dobry den

[40]Napriklad ted delam stanky pro malire a ten jiste nechce deformace obrazu kvuli nastaveni v %

Pokud jsem bezny uzivatel mam prostou otazku proc se mi pismo nezvetsilo?
Jako tutka z kanclu si reknu ze je to mim pocitacem..Podle me hodne techto lidi co o tom moc nevi si tohle rekne..proste hledaj spis chybu u sebe protoze tomu nerozumi..On tam ma zvetsi pismo..pocitac mu to neudela..jeho chy­ba.

Uz jen z logiky…kdo pouziva pro zvetseni neco co nefunguje na vsem mel by se poradit a okamzite nainstalovat FireFox..

Chybi a arognce M jen proto ze jsou nejvetsi me zacina srat..Bohuzel jen tezko lidem vysvetlim ze v dnesni dobe jeste stale pouzivat IE je nesmysl..ale kde tu moznost mam davam FF

Ja delam jen v px..Za to me asi odsoudite..ale standartne vsechny www delam pro 800×600 Lidi z vetsim rozlisenim maj okamzite prehled o cele strance a lidi z mensim uz me tolik nezajimaji..stejne vetsina stranek je uz obsahlejsi a lidi s mensim rozlisenim se pak muzou udavit..ono totiz to pocitani procent je dost namahavejsi pro procesor takze lidi z pomalim komplem budou mit porad problemy

Váš komentář

Upozornění: Pokud vás téma tohoto příspěvku nezajímá, nebaví, dotýká se vás či vás dokonce uráží, tak prosím odejděte a pokud možno se nadále ve vlastním zájmu dalším podobným vyhýbejte. Hlavně se to prosím nesnažte autorovi sdělovat v komentářích, takové příspěvky nikoho nezajímají a budou nejspíš vymazány. Totéž platí pro vaše názory na osobu autora, na jiné přispěvatele, mluvení z cesty, ze spaní či pod vlivem omamných látek a další podobné výlevy nesouvisející s tématem článku. Jinými slovy, toto je prostor soukromého blogu určený pro komentování příspěvku publikovaného výše, nikoli k chatování a volné diskusi. Děkuji za pochopení.

Abyste mohli komentovat, musíte se přihlásit.