Hlavní navigace

Velikost písma v moderních prohlížečích

 Autor: 29
Pavel Salvet 24. 4. 2007

K moderním prohlížečům patří již zcela samozřejmě funkce, která uživateli umožní upravit si velikost textu. Různé prohlížeče nabízejí tuto funkci v různých variantách. Vzhledem k tomu, že jde o skutečně významnou a důležitou pomůcku, byť dosud málo používanou, jistě by nebylo od věci prozkoumat její uplatnění alespoň v těch nejpoužívanějších prohlížečích a porovnat jejich komfort.

Safari

Safari je výchozí prohlížeč pro Mac OS X založený na jádře KHTML. Do povědomí odborné veřejnosti se silně zapsalo tím, že jako první prošlo testem Acid2.

Nekorektním způsobem se Safari staví k otázce nastavení velikosti písma. Tady se dopouští technické chyby, když zvětšuje, resp. zmenšuje i písmo, jehož velikost je definována absolutními jednotkami nebo v pixelech. Toto pochybení je nicméně vcelku vynucené, když vezmeme v úvahu časté zneužívání těchto jednotek.

Velikost písma se v Safari nastavuje v nabídce View nebo klávesovými zkratkami Command++ a Command±.

Safari umožňuje také nastavení výchozích parametrů písma (včetně například nastavení minimální velikosti).

Konqueror

Konqueror je souborový manažer a webový prohlížeč v jednom. Lze jej nalézt na Linuxu jako součást KDE. K zobrazování webových stránek používá jádro KHTML.

Rovněž Konqueror zvětšuje a zmenšuje všechen text bez ohledu na to, jestli to webdesigner dovolil (jaké hodnoty pro velikost písma užil), nebo ne. Zvětšování i zmenšování textu je stupňované a také omezené. Maximálně může být text zvětšen na 300 procent. Zmenšen může být teoreticky až na 20 procent, ale to pouze za předpokladu, že by písmo nebylo až příliš malé. V Konqeroru je totiž nastavena minimální velikost písma, pod kterou už zmenšovat nejde. Přesto se mi při testování podařilo objevit skulinu, skrze niž lze stanovené minimum obelstít. Pokud je přes CSS nastaveno, aby bylo písmo menší než 1 px, způsobí to pravděpodobně chybu při výpočtu a daný text je zobrazen formou drobounkých teček.

Písmo lze zvětšit obvyklými způsoby, tedy z nabídky Zobrazit nebo klávesovými zkratkami Ctrl++, Ctrl±, a navíc ještě pomocí ikon na liště, které jsou asi vítanější než klávesové zkratky, protože internetoví surfaři používají nejčastěji myš. I přesto se vyplatí zařídit se tak, aby velikost písma nebylo potřeba upravovat. Postačí vhodně nastavit minimální a střední velikost písma. Cesta k tomu vede přes poslední položku v nabídce Nastavení. V nově otevřeném okně si stačí v levém bočním menu vybrat položku Písma a pak už jen editovat, viz obrázek.

Konqueror

Nastavení písma v Konqueroru

Firefox

Firefox v základu zvětšuje pouze text nebo objekty, jejichž velikost je definována v jednotkách em nebo ex, čili se chová obdobně jako výše zmíněné prohlížeče. Uživatel toužící po zvětšených obrázcích si však může nainstalovat potřebné rozšíření ze stránek https://addon­s.mozilla.org. Například Page Zoom nebo zoomFox.

Podobně jako uvedené KHTML prohlížeče i Firefox zvětšuje, resp. zmenšuje i písmo, jehož velikost je definována absolutními jednotkami nebo v pixelech, a podobně jako ony i Firefox občas potkává svízel, když po zvětšení písma musí kvůli neflexibilní šířce omezujícího bloku text vtěsnat do užšího prostoru. O mnoho lepší to není ani při zmenšeném písmu. Řádky se mohou stát nadmíru dlouhými; po dočtení řádku nemusí oko při přesunu k levému okraji udržet linii, a snadněji se proto stane, že člověk přeskočí řádek. Zároveň se u „plovoucích“ a následně „clearovaných“ objektů mohou vyskytnout obrovské mezery mezi odstavci. Popsaným nepříjemnostem se dá předejít tím, že se pro určení šířky bloků využijí jednotky ex a em, avšak to by si vyžádalo hluboké zásahy do celého designu webu a k tomu není ve většině případů ochota, jelikož by to znamenalo více úsilí a mnoho kompromisů.

Na nečekaně malé písmo může člověk narazit při tisku. Děje se tak, když Firefox tiskne příliš širokou stránku a musí ji nejprve celou zmenšit, aby se vešla na šířku papíru. Tvůrci webů však mají možnost vytvořit CSS styl pro tisk a v něm upravit stránku tak, aby účelům tisku vyhovovala.

Velikost písma se ve Firefoxu nejrychleji nastaví pomocí kombinací Ctrl++, Ctrl± a Ctrl+0.

Rovněž Firefox disponuje pokročilým nastavením písma, pouze je trochu obtížnější toto nastavení najít. Skrývá se pod záložkou Obsah v sekci Písma & barvy. K samotnému nastavení Firefoxu se ve Windows přistupuje přes nabídku Nástroje a položku Možnosti… (na Macu je to Firefox > Preferences a na Linuxu Úpravy > Předvolby).

Opera

Multiplatformní Opera přistupuje k otázce zvětšování/zmen­šování skutečně velkoryse. Dokáže změnit velikost všech objektů na stránce. I obrázků. Potíž je v tom, že takovéto chování může být z určitých úhlů pohledu značně nepříjemné.

  1. Na webu se nachází především bitmapová grafika. Při zmenšování nebo zvětšování rastrových obrázků nutně dochází k jejich deformaci.
  2. Většina lidí chodí na Internet především kvůli textovému obsahu. Větší obrázky, popřípadě další objekty, jim mohou vadit už jen z toho důvodu, že budou vytěsňovat text. To bude znamenat užší textové bloky a v konečném důsledku také častější scrollování.
  3. Po zvětšení může dojít k tomu, že stránka bude širší než okno prohlížeče.

Opera se citlivě snaží, aby se i zvětšená stránka vešla do okna prohlížeče. Mnohé weby však mají nastavenou pevnou šířku v pixelech a v takovém případě Opera klidně prodlouží šířku stránky mimo viditelnou oblast a zobrazí horizontální posuvník. Naštěstí pro tento případ vymysleli vývojáři Opery šikovnou funkci Fit to width, která opět stlačí stránku na šířku odpovídající šířce okna. Funkce Fit to width už citlivá není a v duchu hesla „účel světí prostředky“ láme řádky třeba i v půlce slova. Skutečnou paseku pak dokáže nadělat zvláště v tabulkách. Tuto funkci naleznete v nabídce Zobrazit nebo po kliknutí na ikonu brýlí na nově se vysunuvším panelu.

Srovnání

V Opeře se text zobrazuje větší než v ostatních prohlížečích. Navíc má Opera potíže se zobrazováním některých českých znaků a vykresluje je zmenšeně. Nabízím ke zhlédnutí výřez screenshotu, kde je ve dvou prohlížečích (Opera a Firefox) vidět část téže stránky. Na něm je také patrné, že Opera má potíže s českou diakritikou, písmena „ř“, „ě“ a „ů“ jsou vykreslena zmenšeně.

Ovládání zoomu je v Opeře nesporně geniální. Stačí jeden prst. A také vědět, kde jsou klávesy +, - a *. Anebo si nakonfigurovat vlastní klávesové zkratky. Téměř jakékoliv zamýšlené úpravy lze provést přes nabídku Nástroje (Tools) > Nastavení (Preferences). V Mac OS X Opera > Preferences. Samozřejmě se to také týká nastavení písma, které je pod záložkou Pokročilé… (Advanced). Nastavení písma je tu ještě nutné najít v bočním menu.

Preferences

Nastavení zoomu v Opeře

Internet Explorer 6

Starší sourozenec z rodiny, MSIE 6, stránky naštěstí zoomovat nedokáže, zato je mu namnoze vyčítáno, že nezvětšuje písmo, jehož velikost je definovaná absolutními jednotkami nebo v pixelech. To však lze naštěstí snadno obejít. V nabídce Nástroje je umístěna položka Možnosti Internetu. Po kliknutí na ni se objeví okno s mnoha záložkami – viz obrázek.

Usnadnění

IE6 – Možnosti usnadnění

Podstatná je v tuto chvíli záložka Obecné. V ní se dole nachází tlačítko Usnadnění…, po jehož aktivaci se zobrazí okno Usnadnění přístupu, kde už stačí jen zaškrtnout políčko Ignorovat velikost písem. Po této úpravě se někde možná trošku rozhodí design stránky, ale samotný obsah už přečíst půjde. Příjemné, nebo vlastně nepříjemné, podle toho, jak se to vezme, je to, že se toto nastavení aplikuje na všechny další stránky. Každopádně zvětšovat písmo všude určitě není potřeba, existuje totiž způsob, jak toto opatření uplatnit jen na některé stránky. Tento způsob bravurně rozvedl a popsal Dušan Janovský. Spočívá ve využití tzv. bookmarkletu, což je vlastně javascriptový kód ukrytý v odkazu. Když se tento odkaz přidá k Oblíbeným položkám, lze jej pak využívat jako spouštěč funkce.

Na rozdíl od většiny ostatních se domnívám, že Internet Explorer postupuje správně, když písmo s absolutně danou velikostí nezvětšuje. Dle mého názoru by i pixely měly zůstat jednotkou relativní pouze vzhledem k rozlišení obrazovky. Navíc někdy může nastat situace (například když ukrýváme nadpis pod obrázkový nadpis), kdy zvětšovací písmo opravdu dobré není. Odvažuji se tvrdit, že celý problém nespočívá v MSIE, nýbrž v pochybných webdesignerech, kteří neumí a ani se nesnaží sestavit flexibilní web a raději se uchylují k primitivním a nepřístupným praktikám.

Ačkoliv byl MSIE 6 na svou dobu velmi vydařený prohlížeč, přece jen se v něm ocitlo velké množství chyb. A jednu z nich představuje i takzvaný embug, který zvětšuje/zmenšuje písmo někdy více, než by bylo příjemné.

Velikost písma lze v MSIE upravit přes nabídku Zobrazit > Velikost písma, nebo ještě snáze kombinací klávesy Ctrl a scrollovacího kolečka na myši.

Internet Explorer 7

Windows Internet Explorer nabízí kromě již známé pětistupňové velikosti písma, které funguje postaru, také zvětšení celé stránky, nejrychleji přes Ctrl a scrollovací kolečko, ale je samozřejmě možné použít už známých kombinací Ctrl+±. Bohužel chybí klávesová zkratka pro obnovení původního stavu, a to je v případě IE7 mimořádně důležité, protože zoomování v něm není ani zdaleka tak kvalitní jako v Opeře, v krajním případě dochází místy i k nečitelnosti textu. Nabouráno je i vycentrování stránky… rozbor nedostatků by byl asi na dlouho.

Shrnutí

Co z článku vyplývá? Definování velikosti písma není samospásné, za určitých okolností je dokonce ignorováno. A „pevné“ rozměry jsou často cestou do pekel. Webdesigneři by neměli příliš spoléhat na definované rozměry a raději vsadit na flexibilitu. Pár odstrašujících případů na ukázku:

H2utek

Well.done zjevně nedělá čest svému jménu – výřez ze Safari při zvětšení písma

Interval

Hledáte nějaké hotové polofunkční CSS řešení? V Knihovně CSS jich je spousta – Firefox při návštěvě serveru Interval.cz, písmo zvětšeno o 20 procent.

Ze sledovaných prohlížečů u mě zcela propadla Opera. Text se mi v ní četl velmi mizerně, důvodem byly řádky doslova nalepené na sobě a různě velká písmena, a zoomování možná přineslo více škody než užitku. Z hlediska čtenářského komfortu mi nejpřínosnější připadá Konqueror. I nastavování písma v něm je přehledné a komplexní.

Z průběžně zveřejňovaných statistik vyplývá, že Internet využívá čím dál více starších uživatelů. Další statistiky zase uvádějí, že u dvou třetin lidí v postproduktivním věku se projevuje v různé míře tzv. věkem podmíněná makulární degenerace (makula = žlutá skvrna = místo nejostřejšího vidění), případně jiné formy degenerace zraku. Z těchto čísel se dá usuzovat, že v budoucnu téma velikost písma na webových stránkách bude více akcentováno a do webdesignerského žargonu proniknou i termíny dosud používané výhradně očními lékaři. Pokud ne, budeme si za třicet let asi moci vyzkoušet, jak se dnes cítí při čtení webových stránek generace našich otců.

V příštím volném pokračování našeho seriálu o méně zmiňovaných, ale praktických funkcích prohlížečů se zaměříme na možnosti tisku.


17. května 2007, doplnění:

1. Safari zvětšováním písma definovaného v pixelech, popřípadě absolutních jednotkách neporušuje žádnou specifikaci. A to jednoduše proto, poněvadž žádná závazná specifikace pro tuto záležitost dosud nebyla vydána, a tudíž doposud není upřesněno, jakým způsobem se mají prohlížeče ke zvětšování písma stavět. Ze stejného důvodů je stejně tak zavádějící tvrdit, že se v tomto ohledu Safari chová dle specifikace, jak se doposud leckdo domníval, navíc je dost pochybné, že by specifikace pro CSS nebo HTML měly stanovovat chování funkcí uživatelského rozhraní v prohlížeči.

Co tedy bylo myšleno pasáží Nekorektním způsobem se Safari staví k otázce nastavení velikosti písma. Tady se dopouští technické chyby, když zvětšuje resp. zmenšuje i písmo, jehož velikost je definována absolutními jednotkami nebo v pixelech? Pro hlubší pochopení je potřeba ozřejmit si nejprve podstatu jednotek používaných k definování velikosti písma. Zatímco relativní jednotky em, ex a % se odvozují z výchozí velikosti písma, která se dá přenastavit, pixely a absolutní jednotky jsou něčím zcela jiným.

Pixel (px) – obrazový prvek, nejmenší jednotka digitální rastrové grafiky, jeho velikost závisí na použitém zařízení – je to tedy relativní jednotka.

Délkové míry (mm, cm, in) – milimetry, centimetry, jejich rozměry jsou pevně stanoveny a jedná se tedy o absoulutní jednotky.

Typografické jednotky (pt, pc) – 1 pc = 12 pt = cca 4,2333 mm; absolutní jednotky.

Je-li tedy definováno

p {font-size: 10px}

tak prohlížeč za normálních okolností nepřizpůsobuje tuto definovanou velikost svému nastavení velikosti písma (sic!) a zobrazí písmo v odstavcích velké deset pixelů, obdobně by tomu bylo s absolutními jednotkami. Co se však stane, když si uživatel písmo zvětší, nebo zmenší? Prohlížeče založené na jádru Gecko a KHTML najednou začnou vnímat tuto desetipixelovou velikost písma (zde opět nutné připomenout, že pixely jsou relativní jen vůči rozlišení a jinak se chovají jako absolutní jednotka) relativně (sic!) a podle potřeby jej roztáhnou, nebo smrští v závislosti na jeho původní velikosti. To samé, co s pixely, by se dělo i s ryze absolutními jednotkami, např. milimetry. Naproti tomu Internet Explorer písmo (rozuměj velikost písma tak, jak je nastavená) sice zvětší, což se projeví u písma, jehož velikost je dána relativně (ale ne v pixelech), leč deset pixelů přesto stále zůstane deseti pixely. Počínání IE se proto může z tohoto (ale pouze z tohoto!) úhlu pohledu jevit jako logičtější a korektnější. Nesporně důležitější však určitě zůstává hledisko uživatele a pro toho je nepochybně lepší, když má příležitost si velikost písma snadno upravit podle vlastního uvážení. Zároveň s tím se vynořuje otázka, proč tvůrci stránek potřebují definovat velikost písma v pixelech. Podle mého názoru to je dáno značným egoismem některých webdesignérů, kteří trpí přesvědčením, že oni přesně ví, jak velké písmo je pro uživatele vhodné, a o tom, že by se měli spokojit jen s pouhou relativní korekcí nechtějí ani slyšet. To, že dominantní IE takové písmo nezvětšuje je podle nich vlastně fajn, protože jim, na rozdíl od toho nepřejícného Firefoxu, nezboří jejich bezvadně pixel na pixel uspořádaný layout. A pokud už se uživatelům něco nezdá, tak ať si zvětší stránku celou, vždyť je tak hezká.

2. Velikost písma a zoom jsou technicky vzato dvě zcela odlišné věci. Zatímco funkce velikost písma má zajišťovat zvětšení, či zmenšení pouze písma na webové stránce, zoom by měl zvětšovat, či zmenšovat celou stránku i s textem. Důvodem, proč jsem doposud tyto věci příliš neodlišoval, nebylo ani tak to, že obě funkce ve svém důsledku písmo zvětší/zmenší, ale především spletité technické nuance, které se nyní pokusím alespoň trochu vysvětlit.

Změnou velikosti písma, např. v Safari, nedochází ad hoc jen ke zvětšení, popřípadě zmenšení písma. Velikostí písma jsou totiž dány jednotky ex a em, kteréžto zas lze použít pro určení rozměrů prvků. To znamená, že při zvětšení písma se mohou zvětšit i rozměry objektů. Šlo by to dotáhnout až k naprosté absurdnosti, kdy by všechny rozměry na stránce včetně rozměrů obrázků byly definované v těchto jednotkách a zvětšení písma by se tak rovnalo zvětšení celé stránky.

CIF16

Co se týče zoomu, je situace ještě složitější, neboť mezi jednotlivými prohlížeči v tomto existují rozdíly a to jak v kvalitě, tak v provedení. Firefox v základní verzi dokonce ani touto funkcí nedisponuje, musí se do něj teprve doplnit.

3. Pokud má Opera nastavený nevhodný výchozí font (Bitstream Vera) pro text webových stránek – projeví se to hlavně ve špatné kompozici textu, jak už bylo zmíněno – bude užitečné provést změny. Cesta k nim vede přes nabídku Nástroje, položku Nastavení, záložku Pokročilé a položku Písma v bočním menu. Ukáže se tabulka použitých fontů. Dvojklikem na jeden z řádků se vyvolá další dialogové okno, v němž lze použitý font změnit. Bohužel nelze vybrat více řádků najednou, a tak se změny musí provést postupně.

Anketa

Který prohlížeč používáte?

Našli jste v článku chybu?
Měšec.cz: TEST: Vyzkoušeli jsme pražské taxikáře

TEST: Vyzkoušeli jsme pražské taxikáře

Měšec.cz: „Ukradli“ jsme peníze z bezkontaktních karet

„Ukradli“ jsme peníze z bezkontaktních karet

Vitalia.cz: Antibakteriální mýdla nepomáhají, spíš škodí

Antibakteriální mýdla nepomáhají, spíš škodí

120na80.cz: Rodiče, pozor: jak dodat vitamín D bez rizika

Rodiče, pozor: jak dodat vitamín D bez rizika

Vitalia.cz: Voda z Vltavy před a po úpravě na pitnou

Voda z Vltavy před a po úpravě na pitnou

Podnikatel.cz: Byla finanční manažerka, teď cvičí jógu

Byla finanční manažerka, teď cvičí jógu

Vitalia.cz: Tohle všechno se dá usušit

Tohle všechno se dá usušit

Lupa.cz: Patička e-mailu závazná jako vlastnoruční podpis?

Patička e-mailu závazná jako vlastnoruční podpis?

DigiZone.cz: DVB-T2 ověřeno: seznam TV zveřejněn

DVB-T2 ověřeno: seznam TV zveřejněn

Podnikatel.cz: 5 věcí, které o EET ještě nevíte

5 věcí, které o EET ještě nevíte

Vitalia.cz: 5 chyb, které děláme při skladování potravin

5 chyb, které děláme při skladování potravin

Podnikatel.cz: Letáky? Lidi zuří, ale ony stále fungují

Letáky? Lidi zuří, ale ony stále fungují

Vitalia.cz: dTest odhalil ten nejlepší kečup

dTest odhalil ten nejlepší kečup

Vitalia.cz: Muž, který miluje příliš. Ženám neimponuje

Muž, který miluje příliš. Ženám neimponuje

Vitalia.cz: 7 příčin neplodnosti u žen: pravda a mýty

7 příčin neplodnosti u žen: pravda a mýty

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

Lupa.cz: Proč jsou firemní počítače pomalé?

Proč jsou firemní počítače pomalé?

Root.cz: Prvních 700 routerů Omnia je hotových

Prvních 700 routerů Omnia je hotových

Lupa.cz: Poučný příběh jednoho rozšíření pro Chrome

Poučný příběh jednoho rozšíření pro Chrome

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?