Velikost písma

Percenta vo veľkosti písma určite nie...

môžeš použiť buď em, alebo inú relatívnu jednotku. Ja však nechávam písma stále na pixeloch. Nevidím dôvod, prečo by to bolo zle (ale rád sa nechám poučiť)

základ pro body v pixelech, vše ostatní pak v em, aby se to od toho pěkně odpočítalo. pro mobil pak třeba jen redefinuju základní číslo pro body a vše se mi hezky přizpůsobí. v ideálním světě :-) ne vždy to ale takhle hezky realizovat jde...

jefitto44:
Myslím že to bylo zase kvůli exploreru. Pokud jsi nastavil velikost textu v pixelech, tak se při zvětšení nebo zmenšení ani nehnul. V kterých přesně verzích se to takto chovalo / chová ale nevím.

jefitto44:
Co to zase blábolíš? Proč ne procenta? Chovají se stejně jako em, ex a ostatní relativní jednotky.

Myslím, že procenta jsou snad vždycky dobrá volba, i u procent je ovšem třeba si pár věcí pohlídat, mimo jiné zanořování: Poskakování velikosti písma v jednotkách em

jefitto44:
„Percenta vo veľkosti písma určite nie...“
Proč ne?
Mně velikost písma v procentech přijde fajn.

„Ja však nechávam písma stále na pixeloch. Nevidím dôvod, prečo by to bolo zle (ale rád sa nechám poučiť)“
Poučka neudávat velikost písma v pixelech pochází z doby IE 6, kde se písmo zadané v px nedalo v prohlížeči uživatelsky zvětšit/zmenšit.
V té době bylo čtení stránek, které někdo dělal v nízkém rozlišení, nastavil třeba 9px písmo a v prohlížeči nešlo zvětšit, bylo skutečně otravné.
Byl to jeden z důvodů, proč jsem přešel na Operu, která tehdy snad jako jediná měla zoom (Firefox měl jen změnu velikosti písma, ale zase zvětšil i písmo v px, Chrome neexistoval :) ).

Dnes už je to asi pasé, protože všechny rozšířené prohlížeče umějí zoomovat celou stránku.

Reaguji na TiffanyHome:
„ale každý prohlíčet má jinou výchozí hodnotu velikosti písma ne?“
Už ne. Opera kdysi tuším mívala menší velikost a v quirku bývala jiná… ale to už je minulost.


Reaguji na Keeehiho:
„V kterých přesně verzích se to takto chovalo / chová ale nevím.“
Ve všech. Zatím žádná verze Exploreru při zvětšování písma nezvětšuje písmo zadané v jednotkách px.


Reaguji na Corwina:
„pro mobil pak třeba jen redefinuju základní číslo pro body a vše se mi hezky přizpůsobí“
To můžeš udělat, i když to základní číslo není v absolutních jednotkách.


Reaguji na Jokera:
„Poučka neudávat velikost písma v pixelech pochází z doby IE 6“
Bude starší, protože ani žádná předchozí verze neuměla pixely zvětšit.

„Dnes už je to asi pasé, protože všechny rozšířené prohlížeče umějí zoomovat celou stránku.“
Přesto si cca 5 % lidí stále zvětšuje jen samotné písmo. Není to pasé.

Chamurappi:
„Bude starší, protože ani žádná předchozí verze neuměla pixely zvětšit.“
Pravda, platilo to i pro ty dřívější, ale rozšíření té poučky jsem zaznamenal až později.
Ono v dobách, kdy skoro všichni měli monitor 14-17" s jedním ze dvou rozlišení (800x600 nebo 1024x768), to asi moc nevadilo, problém nastal až když na přelomu století jednak stoupl běžný počet DPI z ~70 na ~90 (kde se u „velkých“ monitorů mimochodem drží dodnes) a zároveň už existovaly stránky tvořené na starých monitorech a jednak se zvětšily rozdíly v DPI používaných monitorů.

„Přesto si cca 5 % lidí stále zvětšuje jen samotné písmo. Není to pasé.“
A současné prohlížeče nezvětšují písmo v px? Posledních asi 10 let jsem to nezkoušel, tak nevím :-)

TiffanyHome:
„ideální jak to tu psal Corwin......pak stačí pro mobilní styl upravit jen jednu hodnotu..“
Výchozí hodnotu nastavím v procentech, třeba body { font-size: 120%; } a ostatní odvozuji relativně k ní jednotkou em, například h1 { font-size: 2em; }. Pro změnu velikosti na malém displeji stačí přes media queries měnit procentní hodnotu pro body.

Existuje taky jednotka rem (neboli root em). Její nevýhoda je v podpoře mezi prohlížeči - za zmínku stojí, že to nefunguje v IE8 (a má i v novějších IE má pár bugů), ale dá se s tím pracovat (nejlepší je asi mít tam nějaký fallback, třeba v pixelech). Její ohromná výhoda je, že jakoby "ignoruje kaskádování" - její velikost je relativní ke kořeni dokumentu, takže to nedělá to co všechny ostatní relativní jednotky, které ve vnořených elementech stále znovu aplikují svou relativní velikost a písmo se tak neustále neúměrně zmenšuje (nebo zvětšuje).

Amunak:
Vzhledem k nutnosti dodávat fallback mi tato jednotka přijde zbytečná. Rovnou můžu zadat velikost "třeba v pixelech" pro všechny prohlížeče.

Přinzám se, že ač o této jednotce samozřejmě vím, nikdy jsem neměl potřebu ji použít. Ani teď, když jsem se snažil vymyslet zadání, kde by její užití bylo vhodné, mě nic nenapadlo. Zdá se mi být trochu zbytečná, působí na mě jako úlitba začínajícím kodérům, kteří nejsou schopni využívat správně kaskádu.

anonymníí:
Jde spíš o to, že zadat velikost v rem je velmi snadné, a má to všechny výhody relativních jednotek. Tím „kvalitně obsloužíš“ asi 90% návštěvníků. Pro ten zbytek máš fallback v pixelech (pokud si správně spočteš procenta, velikost v pixelech bude přesně desetinásobek velikosti v rem). Množství lidí, co teď musí snášeet nevýhody písma zadaného v pixelech, je teď o dost menší, a přitom jen za cenu jedné deklarace na každou velikost písma navíc (což je docela v pohodě). Zároveň nemusíš řešit kaskádování relativních velikostí, což je podle mě velké plus. Netvrrdím, že se bez toho nedá obejít, ale značně to usnadní práci aniž bys obětoval něco příliš zásadního.

(ukázka)

Reaguji na Amunaka:
„Zároveň nemusíš řešit kaskádování relativních velikostí, což je podle mě velké plus.“
Ono je pracné ho řešit? Obvykle nekóduji celé layouty, tak mám možná zkreslenou představu, ale na první pohled mi logicky vychází, že jediným problémem je smíšený obsah, kdy je uvnitř elementu vedle sebe text a nějaký další element s textem a je žádoucí dát každému z textů jinou velikost. Což není příliš běžné. Ve všech ostatních situacích jde dávat velikost nejhlouběji položené velikostně konzistentní součásti, ne?

„Množství lidí, co teď musí snášet nevýhody písma zadaného v pixelech, je teď o dost menší“
Velikost písma si mění častěji uživatelé starších prohlížečů. V nových prohlížečích je tato schopnost zpravidla důmyslně ukryta a začátečníka nenapadne ji hledat.

„značně to usnadní práci aniž bys obětoval něco příliš zásadního“
Obětuješ menší skupinu, ale pořád je to celkem zbytečná oběť.

Chamurappi:
Máš pravdu, záleží, jak je celý layout dělaný. Já preferuji stav, kdy nastavím nějakému nadřazenému prvku velikost, kterou chci mít pak všude uvnitř, než když musím po jednom vyjmenovávat že p, ul, ol, nějaký ten zvláštně vložený div nebo link pod obrázkem, tabulka apod. mají v dané části layoutu mít nějakou tu relativní velikost písma. Pak na to zapomeneš, divně vložený obrázek s titulkem je pak vložený uvnitř odstavce, a už to musíš řešit.

Beru to jako takovou střední cestu mezi líným definováním fixní velikosti v pixelech a náročnějším přemýšlením nad tím, jak se mi ta relativní velikost zkaskáduje :-)

Amunak:
„divně vložený obrázek s titulkem je pak vložený uvnitř odstavce“
Nevím, jaký titulek máš na mysli, nicméně nadpis H1-6 do odstavce <p> vložit nelze, protože začátkem dalšího blokového prvku je odstavec automaticky ukončen (atribut title=" nějaké povídání " nemá na velikost písma vliv snad za žádných okolností).

Petr ZZZ:
Chtěl jsem říct, že mohou existovat specifické případy, kdy na podobný problém můžeš narazit. Kdybych měl být konkrétnější - mám web s obrázky, jejichž "popisek" nebo "podtext" se doplňuje javascriptem z atributu title. Tyto obrázky i s popisným textem jsou někdy součástí odstavce, takže tento popisný text styluji jako div. Ten má upravenou velikost písma a když jsem používal relativní jednotky, měl takovou tendenci se mi tam nějak podivně zkaskádovat (když nad tím teď zpětně přemýšlím, ani nevím, jak to bylo možné).

Každopádně vím, že používání jednotek rem mi trochu usnadnilo život.

Amunak:
„Tyto obrázky i s popisným textem jsou někdy součástí odstavce, takže tento popisný text styluji jako div.“
Ani <div> do odstavce nenacpeš. :-) Žádný blokový prvek se nedá nacpat do odstavce, protože se odstavec před začátkem jakéhokoli jiného bloku sám ukončí. Uzavírací značka odstavce </p> je nepovinná, prohlížeče si ji v souladu se specifikací samy doplní, jakmile začíná nějaký jiný blokový prvek. Je to vysvětlené na stránce, na kterou jsem odkázal.

Takovýto div, zdánlivě vnořený do odstavce, je tedy ve skutečnosti až za odstavcem:

Prohlížeč to vidí takhle (a přebývající uzavírací značku odstavce na konci ignoruje):

Petr ZZZ:
Hmm, domníval jsem se, že Firefoxí „Inspect Element“ mi ukazuje DOM tak, jak to vidí prohlížeč. A tam si žádný odstavec navíc nevyrábí. Možná s tím má co do činění fakt, že mám u toho obalovacího divu (který je tam proto, aby titulek pod obrázkem držel šířku) nastavený float. Anebo s tím, že to tam vkládám javascriptem pomocí replaceElement nebo čeho na místo, kde byl neblokový prvek (obrázek).

Každopádně když tomu vnějšímu textu nastavím font-size na 80%, tak se mi ta velikost zkaskáduje dovnitř (ovšem chová se to stejně podivně, nedokážu nějak reprodukovat kdy se to tak děje a kdy ne).

Když ten kód vyrobím ručně, tak se to chová přesně jak popisuješ - prohližeči to ty blokové prvky rozbijí. Když to dělám přes ten replace element, tak se to ovšem nerozbije (a velikost písma se aplikuje na vnitřní div).

živá ukázka

Jinak už jsme se zase dostali trochu mimo téma, snad to nikomu nevadí :/

Reaguji na Amunaka:
„Anebo s tím, že to tam vkládám javascriptem pomocí replaceElement nebo čeho na místo, kde byl neblokový prvek (obrázek).“
Skriptem je možné stvořit kombinace, které normálně v HTML udělat nejdou. Matně si vzpomínám na dobu, kdy se tomu Explorer bránil (vyhazoval tuším výjimku „neimplementováno“ nebo „neznámá chyba“), nevím, v jaké verzi s tím přestal. Netroufnul bych si něco podobného dělat, protože pak stačí jedno rodič.innerHTML += "něco" a struktura se ti rozsype (ačkoliv je fakt, že přepsání innerHTML může vyvolat víc potíží a za základní příčinu problému bych pak označil spíš ono, než že je DOM nepřirozený).
Živá ukázka.

„nastavím nějakému nadřazenému prvku velikost, kterou chci mít pak všude uvnitř, než když musím po jednom vyjmenovávat že p, ul, ol“
Já to dělám asi podobně, ale kdybych se dostával do stavu, kdy by mi procenta vytvářela příliš komplikované kombinace, neviděl bych problém v zaměření specifických přímých potomků, když by jiní potomci měli mít jinou velikost. Krom toho jde vždy zresetovat font-size na medium.
Patrně si nedovedu představit, jak bych se do složitých situací dostal. Buď jim nějak instinktivně předcházím, nebo se mi zatím vyhýbají skutečně složitá zadání.

„Každopádně když tomu vnějšímu textu nastavím font-size na 80%, tak se mi ta velikost zkaskáduje dovnitř“
To ji nastavuješ nějak divně. Mimochodem, psát do atributu title HTML značky mi přijde jako čuňárna.

Dostane-li se mi do rukou JS zadání, kdy mám nahrazovat/vylepšovat cosi, co už je v HTML kódu (třeba k <input>u dodělat kalendář, z tabulky udělat graf), tak se nesnažím vymanit z aktuální velikosti písma, ale naopak ji beru jako další vstupní parametr, který určuje, jak bude výsledek vypadat.

Chamurappi:
„Skriptem je možné stvořit kombinace, které normálně v HTML udělat nejdou. Matně si vzpomínám na dobu, kdy se tomu Explorer bránil (vyhazoval tuším výjimku ‚neimplementováno‘ nebo ‚neznámá chyba‘), nevím, v jaké verzi s tím přestal. Netroufnul bych si něco podobného dělat, protože pak stačí jedno rodič.innerHTML += "něco" a struktura se ti rozsype (ačkoliv je fakt, že přepsání innerHTML může vyvolat víc potíží a za základní příčinu problému bych pak označil spíš ono, než že je DOM nepřirozený).“
Zajímavé, netušil jsem, ženěco takového jde, nebo že to jde tak snadno rozbít. Ale hádám, že to dává smysl. Každopádně díky za ukázku.

„Patrně si nedovedu představit, jak bych se do složitých situací dostal. Buď jim nějak instinktivně předcházím, nebo se mi zatím vyhýbají skutečně složitá zadání.“
Myslím, že tomu mimoděk předcházíš. Ostatně ani já, jak se na to tak teď dívám, bych s tím problém neměl.

„Mimochodem, psát do atributu title HTML značky mi přijde jako čuňárna.“
To bylo jen pro demonstraci, že se to tam zkaskáduje (mohl bys ta data brát odjinud než z tagu title). Jinak tam mám jenom text. Čemu ale pořád trochu nerozumím je, proš se nezkaskáduje už ta první úroveň (tím myslím ten první <div> uvnitř odstavce - má přeci 50% velikost, takže by měl mít 50% z toho co má písmo v tom nadřazeném odstavci, ne?). Možná to ale bude právě tím netypickým DOMem.

„Dostane-li se mi do rukou JS zadání, kdy mám nahrazovat/vylepšovat cosi, co už je v HTML kódu (třeba k <input>u dodělat kalendář, z tabulky udělat graf), tak se nesnažím vymanit z aktuální velikosti písma, ale naopak ji beru jako další vstupní parametr, který určuje, jak bude výsledek vypadat.“
To zní docela rozumně, hádám, že mě trohu přemohla lenost. Zkrátka mám rád, když můžu bez velkého přemýšlení nastavit rodičovskému prvku nějakou velikost písma s vědomím, že bude v jeho potomcích všude stejná.