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, WebdesignKomentáře: 60

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

[1] Vložil(a): met 24. 4. 2007 v 17.19

Pixy, je radost videt te psat zase o CSS (sorry za OT, nedalo mi to).

[2] Vložil(a): MiSHAK 24. 4. 2007 v 17.51

Jak jsem uviděl stránku mého rodného města byl sem zaskočen. Na obhajobu rodáka mohu říci jen to, že se ho pokusíme společně s Lukášem Havrlantem navštivit a poučit ho trochu o kaskádových stylech, prohlížečích a demagogii obecně.

[3] Vložil(a): Daniel Kulhánek 24. 4. 2007 v 18.07

Hezký článek, docela změna po serii článků o vaření :) Jen pro doplnění, 1in = 2,54cm.

[4] Vložil(a): Richard 24. 4. 2007 v 18.32

Jak jsem přečetl nadpis, hned jsem věděl že to je kvůli článku na Lupě. Jak vidno, popularitu lze získat nejen tím, že člověk udělá něco lépe než jiní, ale taky tím že něco opravdu pěkně zpacká.

[5] Vložil(a): Lukee 24. 4. 2007 v 18.47

MiSHAK: Jojo, dáme s ním někdy spicha a hodíme řeč. Ještě by mohl přijet DGX, má tu bratrance ;-).

[6] Vložil(a): lynn 24. 4. 2007 v 19.45

Ještěže lupu nečtu, brrr, málem mě osypalo a rychle jsem to zavřela (po přečtení „špatného“ Safari)

[7] Vložil(a): Piki 24. 4. 2007 v 20.55

Nie je problém článku na Lupe to, že chybne považuje jednotku px za absolútnu, pretože sa obvykle stotožňuje z bodom obrazovky? (Bod obrazovky je predsa len asi absolútny a bolo by divné aby ho prehliadač zväčšoval)

[8] Vložil(a): MiSHAK 24. 4. 2007 v 21.04

[5] S jeho bratrancem jezdím občas do Brna.

[7] Pixel je jednotka relativní jako každá jiná, protože jeho relace je k zobrazovacímu zařízení.

[9] Vložil(a): Pixy 24. 4. 2007 v 21.04

[7] Ale však taky nidko nechce zoomovat pixely. Jde jen o to, že když mám definované v CSS, že daný text má být velký 10px a pak řeknu browseru, aby zobrazil texty 2× větší, tak že to IE neudělá. Vykreslení stránky (akce jádra browseru) a zvětšení písma (akce UI browseru) jsou dvě různé věci a nemají se míchat dohromady.

[10] Vložil(a): Pixy 24. 4. 2007 v 21.07

ad [3] Díky za upozornění, doplnil jsem.

[11] Vložil(a): [X] 24. 4. 2007 v 22.22

> 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é.

Tady by asi bylo dobre rici, ze ackoliv je lupa v MacOS X resena perfektne, porad se jedna o rastrove umele zvetseni. Tim chci rici, ze zvetseny _vektorovy_ font v prohlizeci vypada lip ;)

[12] Vložil(a): Pachollini 24. 4. 2007 v 22.36

Je někde ve specifikaci CSS popsáno, jak má prohlížeč reagovat na uživatelskou změnu velikosti písma? Já to při letmém hledání nenašel, jenom toto: http://www.w3.org/…CSS2/ui.html#q6 což je dost vágní.
Pokud to není ve specifikaci, myslím, že chování IE lze označit za pitomé, ale asi ne za chybné. (A byť z toho nejsem nadšený, dovedu si představit dobré důvody pro zachování tohoto chování.)

[13] Vložil(a): Martin Jakeš 24. 4. 2007 v 22.50

Ahoj Pixy, gratuluju ti ke tvému návratu k blogování.

Je pro mě čest, že autor článku kritizuje Knihovnu CSS společně s tvým Well.done. Z toho by se dalo tušit, že projekt, který si mi pomohl dostat do povědomí české webdesignové společnosti už je dostatečně známý, aby se vyplatilo jej zkritizovat společně s projektem tvým.

BTW:můj firefox zobrazuje článek kritizovaný na lupě korektně, má to menu někdo podobně deformované jako ukazuje screenshot v článku na lupě?
Zkoušel sem i FF Gran Paradiso 3.0 Alpha 3 a přesto žádná deformace.
viz. odkaz http://css.interval.cz/…lad-74-1.htm

[14] Vložil(a): pixy 24. 4. 2007 v 23.04

[13] Já si vyprošuju, aby mé jméno a „Well.done“ byly jakkoli spojovány :-D

[15] Vložil(a): KiN 24. 4. 2007 v 23.06

… písma a přisobíte si i celý …

[16] Vložil(a): pixy 24. 4. 2007 v 23.32

[15] Nekecej?! Co to sjíždíš? Fasa matroš…

[17] Vložil(a): Martin Jakeš 24. 4. 2007 v 23.41

Hehe, pekna bota, nejak podvedome sem si to vymenil s Wellstyled.com :-)

Asi bych si mel dat voraz od psani diplomky a uceni se na statnice, 15 hodin sprtani v kuse udela sve :D

[18] Vložil(a): Martin Jakeš 24. 4. 2007 v 23.52

vlastne si ted nejsem vubec jisty jestli je ted Knihovna CSS v tak dobre spolecnosti jak sem puvodne doufal :-) Treba chtel autor v clanku na Lupe spis zabrousit do vod braku na ceskem internetu a tyhle dva projekty se mu k tomu naramne hodily :-)

[19] Vložil(a): Martin Jakeš 25. 4. 2007 v 0.04

[16] asi chtel upozornit na mensi chybku v clanku ;-)

[20] Vložil(a): Pixy 25. 4. 2007 v 1.05

[19]+[16] Tak jako řeknu, ne?, a já jako vopravim, ne?

[21] Vložil(a): Martin Jakeš 25. 4. 2007 v 1.29

[20] jj :-)

[22] Vložil(a): Jiří Bureš 25. 4. 2007 v 7.18

Zahraju si na ďáblova advokáta a pokusím se vysvětlit chování MS k jednotce px tak, jak jej chápu. Pixel je jednotkou relativní, ale „jinak relativní“ než em a spol. Pixel je vztažen k zařízení, em k písmu na zařízení zobrazeném. Jednotka em tak může být v různých prohlížečích různá, ale pixel je stejně velký (na daném zařízení). Z toho podle všeho vycházela logika MS.

[23] Vložil(a): Ukee 25. 4. 2007 v 9.00

[22] Richtig. S tím naprosto souhlasím a podle mne je dokonce chování Microsoftu docela logické.

[24] Vložil(a): David Špinar 25. 4. 2007 v 9.03

To, že MSIE standardně nezvětšuje písmo s jednotkou „px“ je naprosto konzistentní, pokud uvážíme, že rovněž nezvětšuje jednotky „cm“, „pt“, „in "atp. Jednotka "px“ je relativní vůči rozlišení obrazovky, a tudíž by takové písmo mělo být jiné, jen pokud se změní rozlišení obrazovky. Takže, pokud se nezmění velikost jednoho centimetru (což se nezmění nikdy), nezvětšuje písmo s jednotkou „cm“, rovněž, pokud se nezmění rozlišení obrazovky, nezvětšuje ani písmo v jednotkách „px“.

Rozuměj, mně se také líbí chování Firefoxu, který zvětšuje všechno (nezávisle na vůli tvůrce webu, který zrovna tento text chce mít vysoký dva centimetry, nebo deset pixelů), nebo chování Opery a jejího zoomu. Přesto však považuji chování MSIE za naprosto konzistentní. Nezvětšování jednotek „px“ má prostě stejnou logiku jako nezvětšování jednotek „cm“.

[25] Vložil(a): Jiří Sekera 25. 4. 2007 v 9.07

Přesně jak píše Jiří Bureš – pixely sice nejsou na každém zařízení absolutně stejné, nejsou ale na konkrétním zařízení relativní. Osobně mi připadá logika nezvětšování písma, s velikostí definovanou v pixelech, jako naprosto logická věc. Ostatně sám je používám, pokud je výška písma důležitá ve vztahu k výšce nadřazeného bloku nebo bitmap na pozadí (ačkoliv by k tomu u webu jako média nemělo docházet). Pokud tedy řeknu, že pixel má být odteď dvakrát větší, měly by být dvakrát větší všechny pixely – přesně tak jak jak to dělá IE7 a už dlouhou dobu Opera.

[26] Vložil(a): Pavel Salvet 25. 4. 2007 v 9.53

Hezký článek,
jen bych chtěl doplnit, pár věcí:

stejně jako pixely, nezvětšuje IE ještě další jednotky např. cm, in, …

„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“
Možná budu trošku hnidopich, ale lupa u webových prohlížečů rozhodně není příliš podobná tomu, co známe z jiných aplikací. Rozdíl je v tom, že webové prohlížeče se snaží obsah vměstnat na šířku okna.

[27] Vložil(a): Pavel Salvet 25. 4. 2007 v 10.17

[2] Obhajobu i poučení budu potřebovat. Kdy se stavíte, kluci? :)

Už teď bys ale mohl vysvětlit, v čem spočívají ty Pixym proklamované chybné předpoklady a zásadně mylné informace. Vážně. Po přečtení komentářů jsem si uvědomil řadu hrubých nedostatků, ale nejsem si vždy jist na co Pixy naráží. On toho vlastně ani moc neprozradil.
Nekritické slintání u Opery nechápu vůbec. Operu jsem od začátku tvrdě kritizoval.
Také netuším, odkud zná Pixy direktivy, které určují, jak se písmo má či nemá zvětšovat. Plaváček v diskusi odkázal na jeden working draft, ale jinak fakt nevím. Ví Pixy více?
Předpokládal jsem rovněž, že je všeobecně známo, že hodně webdesignérů si jednotku px oblíbilo, protože pomocí ní chtěli zakázat případné zvětšení písma a má poznámka
tedy bude bez problémů pochopena.

Kdybys to osvětlil, budu rád. Pixy, jak se zdá, na nějaké osvětlování nemá absolutně náladu. Snad si příští článek aspoň přečte :)

[28] Vložil(a): David V. 25. 4. 2007 v 10.29

Pixy, díky za hezký článek

[29] Vložil(a): Pavel Salvet 25. 4. 2007 v 10.42

[6]„Ještěže lupu nečtu, brrr, málem mě osypalo a rychle jsem to zavřela (po přečtení „špatného“ Safari)“

Ale já jsem přece o špatném Safari nic nepsal. Ten odstavec, který asi zmiňujete je pochopitelně katastrofa, ale dále v článku jsem vysvětlil, co jsem tím chtěl říct.
Stručně: Domnívám se, že v některých případech se hodí nezvětšovací písmo. Toto dle mého mají zajišťovat třeba pixely. Safari ale pixely jako vše ostatní zvětšuje, což je za dané situace jedině dobře.

BTW – co jste zavřela, když lupu nečtete?

[30] Vložil(a): Pixy 25. 4. 2007 v 11.51

Když jako uživatel narazím na stránku, kde jsou na mě písmenka moc malá, a v browseru najdu funkci Velikost písma: Větší, vyberu to a ono to NIC neudělá, tak celý Microsoft pošlu do nejtemnější řiti i s těmi „logickými“ argumenty.

[31] Vložil(a): Petr Stříbný 25. 4. 2007 v 12.33

Pixy: Naprostý souhlas! Funkce zvětšování písma má plnit jednoduchou funkci – zvětšovat písmo. A taky nechápu proč se px jednotky u písma v různých doporučeních zakazují.

[32] Vložil(a): Jiří Sekera 25. 4. 2007 v 13.19

[30] Ale pokud má být písmo velké X pixelů/cm/inchů – „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ě“. Zamýšlel bych se spíš nad onou zvětšovací funkcí, která nabízí něco, co vlastně plnit nemá.
Je to asi jako kdyby měl prohlížeč funkci pro širokoúhlé monitory, která by po aktivaci definovala všem blokům maximální fixní výšku a obtékání zprava.
Dle mého názoru má opodstatnění funkce integrovaná v MacOS, Opeře nebo IE7 a starším IE a Mozillám bych spíše vytýkal, že nerespektují konkrétní definice, které násilně přebijou.
Jedna věc je provedení, druhá je smysl. Pokud chci zvětšovat, chci zvětšovat dokument i s jeho vizuálním a funkčním kontextem. Je až příliš naivní šířit poselství o 100% adaptovatelných webech se změnou velikosti písma…

[33] Vložil(a): Pixy 25. 4. 2007 v 14.26

[32] Vy chcete, já zase ne. Já mám neustále po ruce obě možnosti – Cmd +/- nebo ikonky aA přímo v okně Safari (zmenšit/zvětšit písmo) a Ctrl-kolečko (systémová lupa) – a výrazně víc využívám jen zvětšení písma, protože to je užitečnější, příjemnější, praktičtější. Já prostě v 99.9 % případů nechci zvětšit stránku ani žádný objekt či grafický prvek na ní, chci pouze dvakrát větší písmenka, abych nemusel koukat na monitor moc zblízka a mohl číst pohodlně opřený a z větší dálky. Lupu vlastně používám skoro výhradně jen na flashová videa, abych si je zvětšil na celou obrazovku.

Ta „zvětšovací funkce“ naopak plní přesně to, co plnit má: zvětší mi na mou žádost písmo ve stránce na určitý násobek základní velikosti, kterou má definovánu stránka.

[34] Vložil(a): Ukee 25. 4. 2007 v 14.36

Je to věc pohledu, já se snažím na jednotku „px“ zapomenout a už jsem ji několik let nepoužil a až se Pixy přejmenuje na EiMy anebo %i%y tak všechny tyhle komentáře pozbydou smyslu.

[35] Vložil(a): Pachollini 25. 4. 2007 v 17.02

[30] Já taky, v tom je shoda. Jenom mě pořád nikdo nepřesvědčil, že je někde specifikované, jak se má v takové situaci browser standardně chovat, a přitom mám pocit, že jsou tu lidi, co si myslí, že to specifikované je. Já neříkám, že není, jenom jsem to zatím nenašel.

[36] Vložil(a): Roj 25. 4. 2007 v 17.40

Plne souhlasim s [30] a samozrejme s [1] :-)

Naopak [22] je velice vyuzitelne pro tzv „antioptimalisaci“ pro IE. Pouziju! :-)

[37] Vložil(a): Pixy 25. 4. 2007 v 18.23

Já si nemyslím, že by to bylo někde specifikované, protože nejde o záležitost nějakého jazyka nebo protokolu, ale je to čistě funkce UI prohlížeče. Je to v obyčejné selské logice – když chci zvětšit písmo na stránce, tak nehodlám řešit, proč se mi kousek zvětší, a kousek ne.

Problém je v tom, že zatímco všechny browsery umožňují zvětšit písmo na stránce a dělají to „správně“, tj. logicky a očekávaně (prostě v daném poměru větší písmo na celé stránce),tak Microsoft – jak je to pro něj typické – to převzal a implementoval po svém. A sice tak, že neumožňuje zvětšit písmo na stránce, ale pouze výchozí písmo, které se používá pro nestylovaný dokument a z něhož se odvozuje základní velikost písma v BODY, pokud v CSS není explicitně určena. Tedy to, co mají jiné browsery taky, ale někde v předvolbách pod položkou „default font“ apod. Zvětšení písma na „larger“ v MSIE totiž není nic jiného, než když vlezete třeba ve FF do Settings → Content a výchozí písmo si změníte z přednastavených 14pt např. na 18pt. Nic víc, nic míň.

To je ten nesmysl a nelogičnost – ta funkce v MSIE vůbec nezvětšuje písmo na stránce, ale mění základní velikost výchozího nestylovaného písma. Kdyby to bylo v převolbách IE (Tools → Internet Options → General → Fonts), bylo by to v naprostém pořádku – když je to v menu View dostupné přímo z UI, navíc pod názvem Text Size, je to jen matoucí. Tato funkce a takto postavená měla smysl v dobách před CSS (ostatně tomu odpovídá i doba jejího uvedení a tehdejší opovržlivý vztah MS k CSS), protože oba přístupy produkovaly stejný výsledek. S tabulkovým layoutem bez CSS to totiž funguje skvěle a úlnbě stejně jako třeba ve FF. Jenže s dokumentem nastylovaným pomocí CSS se to navzájem tluče už na nejnižší ideologické úrovni a je to v rozporu s dojmem proklamované funkčností, který se to snaží vzbuzovat: tedy zvětšit písmo na zobrazené stránce.

Proto trvám na tom, že tohle řešení je nesmysl – a notabene ho považovat za normativní je úplně scestné.

[38] Vložil(a): Daniel Kulhánek 25. 4. 2007 v 18.50

[31] No protože písmo s jednotkami px MSIE nezvětšuje :) Jinak by v tom nic nebylo. Ostatně viz. článek ne? :)

[39] Vložil(a): Miloš 25. 4. 2007 v 21.02

[29] „Domnívám se, že v některých případech se hodí nezvětšovací písmo…
Jestliže se mi jako uživateli (návštěvníku stránky) nepodaří zvětšit to, co si přeju zvětšit, asi tu stránku zavřu a už se nevrátím.
Chci říci, že je to ze strany kodéra v lepším případě lenost, v horším arogance.
Proto mi celá slavná debata o tom, jestli má/nemá jít zvětšovat pixely a milimetry mi přijde zbytečná.

[40] Vložil(a): pixy 25. 4. 2007 v 21.49

[29] „Stručně: Domnívám se, že v některých případech se hodí nezvětšovací písmo.“

Bylo by možné uvést ty příklady, kdy se to hodí? Myslím kdy se to hodí uživateli, ne kodérovi – web je pro uživatele, ne pro autory stránek. Já takový příklad přes veškerou snahu dosud nevymyslel.

[41] Vložil(a): dgx 26. 4. 2007 v 5.24

[40] proč tedy W3C zavádí absolutní jednotky?

[42] Vložil(a): pixy 26. 4. 2007 v 8.08

Šmarjá i ty, Bruto? Neříkej mi, že i ty nechápeš rozdíl mezi algoritmem vykreslením stránky a funkcí UI „zvětšit“ písmo… Nebo jen jako vždy provokuješ?

  • Absolutní jednotky jsou pro to, aby autor řekl „tenhle nadpis se nakreslí vysoký 10 cm“.
  • Relativní jednotky jsou pro to, aby autor řekl „tenhle podtitulek se nakreslí poloviční velikostí než ten nadpis nad ním“.
  • Zvětšení písma v browseru je pro to, aby uživatel nad spočítanou a hotovou stránkou řekl „ty písmena jsou tak velký, že se mi nevejdou do okna. Udělej všechny texty 4× menší“.

Rozdíly mezi jednotkami mají smysl při počítání kaskády a renderování stránky, jsou součástí algoritmů deinovaných specifikacemi použitých jazyků (HTML a CSS). Zvětšení/zmenšení písma už je jen uživatelská funkce v UI klientské aplikace, určující koeficient, který se má hromadně použít na celý obsah té hotové stránky.

[43] Vložil(a): dgx 26. 4. 2007 v 9.25

[42] to jsme si nerozuměli. Teda spíš jsem se blbě vyjádřil, zkusím to obšírněji.

Px je podle selské logiky absolutní jednotka, stejně jako „cm“, „mm“ atd. Relativní jednotky „em“ a „ex“ jsou pouhé slovní substituce za 100% resp. 50%. Ale abych mohl říct 50%, musím říct „z čeho 50%“. Což u px neplatí. Px je na každém zobrazovacím zařízení jasnej. Je absolutní.

Relativní jednotka se váže strom dokomentu. Velikost písma můžeme nejprve určit absolutně (např. 1cm), poté ve vnořeném bloku relativně (110%) a nakonec v dalším vnořeném bloku opět relativně (110%).

Funkce zvětšení písma pak musí projít strom a všechny absolutní jednotky (1cm) vynásobit zvětšovacím koeficientem, naopak relativní jednotky (110%) ničím násobit nesmí! Tak, a tady je opět „px“ ve škatulce jednotek absolutních.

IE z nějakého důvodu absolutní jednotky nezvětšuje, jen zvětšuje výchozí hodnotu prohlížeče, od které se odvíjí relativní jednotky (tedy ty skutečně relativní, ne „px“).

Zcela souhlasím, že funkce „zvětšit písmo“ by měla zvětšovat písmo, tedy projít strom, ne jen zvětšit jednu výchozí hodnotu. Ale pak se musíme ptát:

  • proč je dle W3C „px“ relativní jednotka (podle algoritmu zvětšování by pak bylo správné ji nezvětšovat)

A přípustíme-li px její absolutní charakter, tak:

  • proč IE nezvětšuje absolutní jednotky jako takové, ne jen „px“

[44] Vložil(a): dgx 26. 4. 2007 v 9.36

…a hend se mohu pokusit i na otázky odpovědět.

  • proč IE nezvětšuje absolutní jednotky?

Protože nezvětšují žádné jednotky, jen výchozí hodnotu. Přesně jak říkáš tady [37]. A je to z historických důvodů. Pro produkty Microsoftu jde o typickou zátěž, třeba i ve Windows Vista najdeme dialogy, na které se od Windows 3.1 nešáhlo. Stejně tak funkce Zvětšit písmo prošla kolem vývoje CSS bez povšimnutí. IE přišlo s novou funkcí Zoom, která však teprve v IE7 našla místo v uživatelském rozhraní prohlížeče.

  • proč je dle W3C „px“ relativní jednotka?

Protože chybu může udělat každý a neexistuje síla, která by ji uměla napravit. Bůh žehnej HTML 5 ;)

[45] Vložil(a): pixy 26. 4. 2007 v 10.39

proč IE nezvětšuje absolutní jednotky?

Ano, konečně jsme se dobrali podstaty. Jestli se někomu zdálo, že mluvíme o tom, jak je špatné nezvětšovat písmo definované v px, zatímco v cm nebo pt je to v pořádku, tak to bylo nedorozumnění. Pochopitelně jde o to, že IE selektivně nezvětšuje písmo definované absolutními jednotkami (kam svým způsobem patří i px). Takže nejde jen o px, ale i o všechny ty ostatní.

proč je dle W3C „px“ relativní jednotka?

Protože JE relativní. Možná jsi zapomněl, že se celou dobu bavíme o „length units“. A ve srovnání s absolutními cm nebo in, jejichž rozměr je fixně dán a můžeš si kdykoli vzít pravítko a přeměřit si to, tak px, který je na tomhle monitoru takový, na druhém dvakrát větší a támhle na plátně na Staromáku velký jak pěst, je skutečně relativní, nemá žádný exaktní rozměr. Není to úměrná či závislá veličina jako em či %, je relativní jiným způsobem, ale relativní je. Můžeš spolehlivě říct „když je to velké 10in, tak je to přesně takovéhle, tj. 25,4 cm“ – ale když je to velké 100px, tak o skutečné velikosti nevíš vůbec nic – je to pokaždé jiné, protože to je relativní k dpi výstupního zařízení.

Ale především, a to je to nejdůležitější, na co se pořád zapomíná: jakékoli dělení na absolutní a relativní jednotky stejně nemá vůbec žádný význam. To rozdělení je ve specifikaci CS jen jako vysvětlivka a nikde se s ním v exekutivní části specifikace více neoperuje. V celé specifikaci CSS najdete pouze v úvodu soupis používaných jednotek (ty délkové jsou pro přehlednost rozdělené na „absolutní“ a „relativní“), algoritmy normalizace jednotek (po výpočtu kaskády se všechny relativní jednotky přepočítají na absolutní rozměr zobrazovací jednotky) a na jednom jediném místě (u zvukových stylů) doporučení používat pro lepší přístupnost raději relativní jednotky. A to je vše. Nikde není použito něco jako „tady se používají absolutní jednotky“ nebo „pokud tady použijete relativní jednotky, zobrazí se to takhle, a pokud absolutní, zpracuje se to zase takhle“… To rozdělení je jen pomůcka pro čtenáře, aby věděl, jak se která jednotka používá a přepočítává, samo o sobě je to zcela bezúčelné. Takže i kdyby se nakrásně px přesunul mezi absolutní jednotky, nebo se pro něj vytvořila speciální třetí kategorie, je to úplně šumák; ten rozdíl je podobný tomu, jako kdybyste tu specifikaci vytiskli na žlutý papír – při čtení poznáte rozdíl, ale na samotnou specifikaci CSS to nemá naprosto žádný vliv. A to je to podstatné.

[46] Vložil(a): dgx 26. 4. 2007 v 11.15

[45] jojo, s tím bychom souhlasili. Problém není v jednotce „px“, problém je v tom, že IE písma nezvětšuje ;)

Ještě by mě zajímalo, píšeš, že Safari nemá zvětšování, že to obstarává přímo systém. Jak je to řešené? Zvětšuje to rozumně i vektorovou grafiku a písmo?

[47] Vložil(a): Pavel Kout 26. 4. 2007 v 13.23

[46] Asi takhle, Davide (Mac OS X 10.4.9, Safari 2.0.4, MacBook Pro s rozlišením 1440*900): http://client.webface.cz/…-default.png + http://client.webface.cz/…fontsize.png + http://client.webface.cz/…stemzoom.png.

[48] Vložil(a): Pavel Salvet 26. 4. 2007 v 13.47

[40] Poctivě se přiznám, že jsem v praxi také nenarazil na případ, kdy by se hodilo nezvětšovací písmo, ale ve svém článku jsem si jeden takový vymyslel, a sice překrývání nadpisu okrasným grafickým nadpisem. Kdyby po zvětšení písma ten normální nadpis vyčuhoval, tak by to kazilo estetický dojem. Takových příkladů se dá vymyslet spousta: dejme tomu byste chtěl v nějaké souvislosti s tímto článkem ukázat, jak vypadá písmo velké 10px – musel byste použít obrázek, přitom někdo si obrázky dodnes vypíná, navíc by ten daný text nešel zkopírovat…

[49] Vložil(a): dgx 26. 4. 2007 v 14.25

[46] díky! Takže systémový zoom je pro potřeby webového prohlížeče na houby, to je obdoba zvětšovadel desktopu ve Windows.

Tedy:

  • Safari & Firefox umí zvětšovat písmo
  • Opera & IE7 umí zoomovat
  • IE 6 umí zoomovat po instalaci doplňku
  • IE neumí zvětšovat písmo, ale jen výchozí hodnotu

Je to tak?

[50] Vložil(a): Pixy 26. 4. 2007 v 14.41

Asi je to tak – doplněk pro zoom v IE6 neznám.

[51] 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 ;)

[52] 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%')

[53] 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ů.

[54] 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“?

[55] 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).

[56] 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?

[57] 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?

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

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

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

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

[60] 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.