Typografie na webu…
Nadpisy a odstavce
V následující kapitole si představíme jednoduché postupy, jak dodržet jisté typografické konvence na internetu. Upozorňuji však, že je nutná minimálně základní znalost kaskádových stylů (CSS), protože všechny příklady jsou založeny právě na stylech. K získání nutných základů doporučuji navštívit výborný server Jak psát web.
Pro složitější formátování nadpisů je třeba znát atributy, jež se dají aplikovat na blokový element (u řádkových elementů je jejich funkce mírně odlišná). Jedná se o následující vlastnosti: vnější okraj (margin), vnitřní okraj (padding), rámeček (border) a samotnou výplň, případně jejich horní, pravou, spodní, levou (top, right, bottom, left) část, čehož za chvíli využijeme. Popsaný blokový element ilustruje následující obrázek.
Formátování jednotlivých prvků HTML je dáno příslušnou specifikací. Ta určuje výchozí vlastnosti pro nadpisy a odstavce například takto:
h1 {display: block; font-size: 2em; margin: .67em 0}
p {display: block; margin: 1.33em 0}
Pozor! Na blokové elementy v normálním toku dokumentu se aplikuje pravidlo o slučování (vnějších) okrajů. Řečeno slovy praxe to znamená, že u dvou blokových prvků, které spolu sousedí, se jejich vertikální okraje nesčítají, ale slučují, použije se pouze větší z nich. Ukázka reálného zformátování předchozího příkladu je na následujícím obrázku.
Vypsaná deklarace nám říká, že blokové prvky h1 (nadpisy nejvyšší úrovně) jsou dvakrát větší než základní použité písmo a mají horní a spodní okraj (margin) o velikosti 0,67 čtverčíku. Vertikálního odsazení odstavců je pak docíleno jejich horním a dolním okrajem 1,33 čtverčíku (levý a pravý jsou nulové). To se nám ale nehodí, my v rámci nabytých typografických znalostí požadujeme, aby nadpisy byly přisazeny těsněji k odstavci a vyjadřovaly tak jasně svou příslušnost, proto změníme hodnotu sdružené vlastnosti margin u tagu p tak, aby spodní okraj nabyl hodnoty 1em a ostatní byly nulové.
p {margin: 0 0 1em 0}
Ale proč si trochu více nevyhrát? K čemu je dobrý horní okraj nadpisu h1? K ničemu, pryč s ním! Odsazení od předcházejícího odstavce přece zajišťuje odstavcový spodní okraj. Pokud bychom však odstranili i spodní okraj elementu h1, byl by nadpis příliš těsně „přilepen“ k odstavci, nepatrně jej tedy upravíme.
h1 {margin: 0 0 0.15em 0}
Malá rekapitulace: Odstavce p mají spodní okraj 1 čtverčík, ostatní nulové. Nadpisy h1 spodní okraj 0,15 čtverčíku, ostatní rovny nule. V praxi to znamená, že nadpis je přisazen poměrně těsně k následujícímu odstavci, mezi odstavci máme mezeru o velikosti 1 čtverčíku. Nic nám nebrání sjednotit vlastnosti pro všechny nadpisy, jež budeme používat, například takto:
h1, h2, h3, h4, h5 {margin: 0 0 0.15em 0}
Viz uvedený příklad. Zatím to není nic moc, ale dále si ukážeme několik drobností, které přispějí k o mnoho lepšímu výsledku.
Jak na odsazení prvního řádku?
Chceme-li odsadit první řádek odstavce o určitou hodnotu, použijeme CSS vlastnost text-indent (odsazení textu) pro selektor p (odstavec) nebo pro libovolnou třídu nebo identifikátor odstavce. Nejprve nastavíme odsazení pro všechny odstavce dokumentu:
p {text-indent: 1em;}
Tato deklarace zajistí odsazení prvního řádku všech odstavců o vzdálenost jednoho čtverčíku doprava. Pokud ale chceme odsadit jen odstavce určitého typu, je nejjednodušší vytvořit si pro ně vlastní třídu (class)…
<p class="odsazeny"> text text </p>
… a pak už jen pro tuto nově vytvořenou třídu nastavit vlasnosti:
.odsazeny {text-indent: 1em;}
Hodnota odsazení je samozřejmě libovolná, nejlepších výsledků dosáhneme nastavením hodnoty na 1—2 čtverčíky. Čtverčíkovou jednotku volíme proto, aby při zvětšování/zmenšování písma zůstala vzdálenost v poměru ke stupni písma.
Popsanou vlastnost zvládají IE a NN od verze 4 a všechny moderní prohlížeče (Mozilla, Opera).
Řádkový proklad
Většinou je též vhodné zvětšit řádkový proklad textu. Výchozí řádkování je příliš těsné, proto jej změníme na praktičtější hodnotu. Na webu jsou asi nejvhodnější hodnoty v rozmezí 1.4—1.8em, jelikož zásadně přispívají k čitelnosti textu.
p {line-height: 1.6em}
h1, h2, h3, h4, h5 {line-height: 1.5em}
Zarovnání odstavce
Zarovnání textu vlevo nebo vpravo docílíme vlastností text-align a hodnotami left nebo right. Je sice technicky možné zarovnat odstavec i do bloku (nastavením hodnoty justify), ale vzhledem k tomu, že prohlížeč neumí dělit slova, vznikají velice často nehezké řeky, zvláště u úzkých odstavců pak taková sazba vyhlíží naprosto odporně. Je lepší se takovému zarovnání na webu zdaleka vyhnout.
Závěr
Nyní si představíme komplexnější a téměř použitelný styl textu, kde využijeme většinu dříve zmíněných vlastností plus další z předcházející části o fontech.
body {
font-family: Verdana, 'Arial CE', 'Helvetica CE', Arial, Helvetica,
sans-serif;
font-size: 75%;
line-height: 1.6em;
}
p {
margin: 0 0 1em 0;
text-indent: 2em;
}
h1, h2, h3, h4 {
line-height: 1.3em;
margin: 0 0 0.15em 0;
}
Podívejte se na příklad 2.
Chceme-li být důslední a používat klasické české odstavce jen s odsazením a bez (anglofonní) vertikální mezery, můžeme poupravit styl například tímto způsobem:
body {
font-family: Verdana, 'Arial CE', 'Helvetica CE', Arial, Helvetica,
sans-serif;
font-size: 75%;
line-height: 1.6em;
}
p {
margin: 0;
text-indent: 2em;
}
h1, h2, h3, h4 {
line-height: 1.3em;
margin: 1em 0 0.15em 0;
}
Zkuste si prohlédnout příklad 3.
Existuje přirozeně velké množství variant a dalšího vylepšení. S největší pravděpodobností bych u příkladu 3 nastavil nadpisu H1 nulový horní margin a upravil velikost jednotlivých nadpisů. Fantazii se meze nekladou.
Abyste problematiku co nejlépe pochopili, vyzkoušejte si zdejší spíše rámcové příklady s odlišnými hodnotami. Nebojte se trochu experimentovat. Vaše webové stránky pak dostanou zcela jiný rozměr.