Typografie na webu…
Sazba na webu
Úvodem je třeba upozornit na skutečnost, že na webu není možné dodržet ani zdaleka všechna pravidla české typografie. Pokud nám však na HTML dokumentu skutečně záleží a jedná se o text dlouhodobého významu, vyplatí se nám těch několik minut navíc při jeho úpravě. V zásadě můžeme říci, že platí stejné zákonitosti, jaké jsou uvedeny v kapitole sazba, především odstavce, vyznačování a interpunkce, ve velmi omezené míře také práce s mezerami. Co jsou to entity jsme si řekli v předcházející kapitole, budeme jich často využívat.
Zarovnání odstavce
Zarovnání textu vlevo nebo vpravo docílíme CSS vlastností text-align a hodnotami left, right nebo center. 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íží vyloženě hnusně. Je lepší se takovému zarovnání na webu zdaleka vyhnout. Ovšem zarovnání na středovou osu nebo doprava se pro delší texty také nehodí. Je vhodné maximálně pro nadpisy, krátké texty, popisy obrázků apod.
p {text-align: left;}
p {text-align: right;}
p {text-align: center;}
p {text-align: justify;} Doporučuji nepoužívat!
Podrobnější informace o sazbě odstavců i s konkrétními příklady naleznete v samostatné části nadpisy a odstavce.
Vyznačování
Vytučnění a kurzíva jsou snadno dosažitelnými způsoby vyznačování. Tučného písma dosáhneme obalením textu tagem strong , kurzívy pak tagem em. Starší tagy b a i jsou již překonány a do budoucna se s nimi v HTML nepočítá, raději je proto nepoužívejte již dnes.
Prostrkání se nastavuje CSS vlastností letter-spacing, malé kapitálky zase vlastností font-variant. Nejsnazší bude vytvořit si třídu „prostrkat“a „kapitalky“, zdrojový kód by pak mohl vypadat nějak takto:
CSS
.prostrkat {letter-spacing: 0.3em;}
.kapitalky {font-variant: small-caps;}
HTML
text text <span class="prostrkat">prostrkaná slova</span>
text text <span class="kapitalky">text kapitálkami</span>
Interpunkce
Interpunkční a speciální znaky jako uvozovky, pomlčky, minus, copyright aj. buď píšeme přímo do HTML dokumentu (v případě kódování UTF-8), nebo zapisujeme znakovou entitou (v případě kódování ISO nebo Windows). Zastavím se jen u nejčastější chyby, záměny spojovníku, pomlčky a matematického znaku minus. Na ukázce za sebou spojovník, půlčtverčíková pomlčka, čtverčíková pomlčka a minus.
- – — −
Mezery
Za jednoznakové přeložky vkládáme nerozdělitelnou mezeru — . Díky této jednoduché úpravě docílíme toho, že přejdou na další řádek. S aplikováním tohoto pravidla v sazbě na praporek nejsou problémy, ty ovšem nastávají při úpravě do bloku (text-align: justify), kdy v Internet Exploreru a alternativním prohlížeči Opera zůstává mezera konstantní, takže je nepříjemně přilepena k následujícímu slovu.
V HTML rozeznáváme také tzv. zúženou mezeru —  . Je o něco užší než nerozdělitelná mezera a měla by se používat mezi číslem a jednotkou, titulem a jménem, při sazbě telefonních čísel a podobně. Má to však jedno ale. Chování nerozdělitelné a tenké mezery v různých prohlížečích je nevyzpytatelné. Tvůrci browserů si totiž vlastnosti mezer interpretovali po svém, a tak se všude chovají trochu jinak (prosinec 2005):
| Nerozdělitelná mezera (Windows) | ||
|---|---|---|
| Webový browser | Sazba na praporek | Sazba do bloku |
| Internet Explorer | neměnná / nezalamuje se | neměnná / nezalamuje se |
| Firefox | neměnná / nezalamuje se | proměnlivá / nezalamuje se |
| Opera | neměnná / nezalamuje se | neměnná / nezalamuje se |
| Zúžená mezera (Windows) | ||
|---|---|---|
| Webový browser | Sazba na praporek | Sazba do bloku |
| Internet Explorer | neměnná / nezalamuje se | neměnná* / zalamuje se |
| Firefox | neměnná / nezalamuje se | neměnná / nezalamuje se |
| Opera | neměnná / zalamuje se | neměnná / zalamuje se |
* V IE je mezera sice konstantní, ale mnohem větší, než by měla být. Je dokonce širší než nerozdělitelná mezera. Nechápu to.
Co z uvedených tabulek vyplývá? Že tři hlavní webové prohlížeče se shodnou pouze při sazbě nerozdělitelné mezery, a to jen tehdy, jedná-li se o zarovnání na praporek. V sazbě zúžené mezery pak panuje naprostá anarchie. Potřebovali bychom, aby byla nerozdělitelná, ale tato podmínka je naplněna opět hlavně v sazbě na praporek.
Z tohoto vyvozuji závěr, že používání tenké mezery je na webu zbytečné, protože přináší jen komplikace. Její funkci zastane lépe mezera nerozdělitelná. Zjištěné výsledky mne jen utvrzují v tom, že sazba do bloku je na webu úplně k ničemu.
Není vám něco jasné? Zkuste nahlédnout do předcházejících kapitol, nebo mi napište. Bude-li to v mých silách, rád poradím.