Sazba
Zarovnat!
Pro zarovnání souvislého textu v HTML platí jiná pravidla než pro tutéž činnost v oblasti DTP. Není totiž možné určit, jak široký bude jeden řádek a navíc, prohlížeč neumí automaticky dělit jednotlivá slova. Z toho vyplývá, že při zarovnání textu do bloku nelze ovlivnit šíři mezislovních mezer a tudíž nelze zabránit vzniku tzv. řek. Řeky jsou nepřiměřeně velké mezislovní mezery, které na sebe v horším případě ještě ve vertikálním směru navazují a tím znesnadňují plynulé čtení textu. V textu tak vznikají bílá místa, která odvádějí čtenářovu pozornost ve vertikální ose a může se tedy snadno stát, že se člověk překoukne a pokračuje ve čtení řádku nad či pod právě čteným.
V CSS máme vlastnost text-align, která řídí zarovnání textu. Může nabývat čtyř hodnot: left, right, center a justify.
| Zápis | Význam |
|---|---|
| text-align: left | Zarovnání vlevo |
| text-align: right | Zarovnání vpravo |
| text-align: center | Zarovnání na střed |
| text-align: justify | Zarovnání do bloku |
Text tedy zarovnáváme výhradně vlevo. Zarovnání do bloku může být estetičtější, ale praxe ukázala, že v tomto případě musí oko estétovo zaplakat. Text je ke čtení, nikoliv k pozorování.
Odsadit!
Odsazení prvního řádku odstavce je určitě ta nejopomíjenější věc na webu. Můj názor je takový, že každý tag <p> by měl mít definované odsazení. Pakliže se autor zdráhá označit text za odstavec, nechť ho obalí třebas tagem <div>.
V CSS k tomu slouží vlastnost text-indent, která přijímá jako hodnotu libovolnou délkovou jednotku. Například zde, na TYPOWEBu, mám definováno:
Takový kód zajistí, že začátek každého odstavce je odsazen o tři čtverčíky, o čemž se můžete snadno přesvědčit.
Prostrčit!
Prostrkání je další užitečnou a přehlíženou vlastností. V CSS můžete snadno definovat mezery mezi slovy i mezi jednotlivými znaky. Slouží k tomu vlastnosti word-spacing a letter-spacing. Na TYPOWEBu je, ačkoliv se to možná nezdá, kvůli čitelnosti pro každý text definován letter-spacing rovný jednomu pixelu. Odvážné, ale funguje to.
Příklad prostrčení jednotlivých znaků.
Příklad prostrčení slov.
Zvýraznit!
Ke zvýraznění slouží v HTML čtyři základní tagy. Jedná se o <strong>, <b>, <em> a <i>. Spousta lidí se domnívá, že <strong> a <b> jsou si ekvivalentní stejně jako <i> a <em>. Mají pravdu jen tak napůl.
<strong> i <b> převedou obsažený text vždy na tučné písmo, jsou si tedy navzájem synonymy. <em> však značí zvýrazněné (emphasized) písmo, zatímco <i> kursivu (italic). Je jen věcí prohlížečů, že zvýrazněné písmo většinou vypisují kursivou. Stejně tak by ho mohly vypisovat tučně nebo třeba s prostrkáním. Dávejte si tedy při používání těchto dvou tagů dobrý pozor.
Dekorovat s rozmyslem!
Když se řekne dekorace v CSS, je myšlena vlastnost text-decoration, která může nabývat pěti hodnot: none, underline, overline, line-through a blink. Underline značí podtržení textu. Této hodnoty je třeba užívat s rozmyslem, nejlépe pak výhradně pro odkazy. Overline je nadtržení, nemá valného významu. Line-through je proškrtnutí každé řádky textu vodorovnou čarou. Uplatnění nalezne všude tam, kde chceme v textu provést dodatečné úpravy a přitom chceme poskytnout uživateli možnost vidět minulou verzi textu. Blink má způsobit blikání textu, v praxi doporučuji nepoužívat. Hodnota none pak přirozeně dekoraci vypíná.
Ukázka nadtržení.
Příklad: Dvě a dvě je pět jsou čtyři.
Blikání rozptyluje (nefunguje v IE).
V další kapitole si povíme něco o entitách, což zahrnuje mezery, pomlčky, uvozovky a podobnou havěť.