Typografická fičůrka
Na svém webu o typografii píšu následující:
„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>.“
Na několika místech (např. zde a zde) jsem byl upozorněn na fakt, že tato formulace není přesná. První odstavec za nadpisem se totiž v české hladké sazbě neodsazuje. Toho jsem si vědom a argumentoval jsem technologickými obtížemi docílení podobného efektu na webu. Dnes jsem si nad problém sedl a vyřešil ho ke své spokojenosti pro drtivou většinu prohlížečů.
Uvádím výchozí kód:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Paragraph test</title>
<style type="text/css">
p { text-indent: 2em; }
</style>
</head>
<body>
<h3>nadpis</h3>
<p>Lorem ipsum dolor sit amet…</p>
<p>Cras porta…</p>
<p>Sed aliquet…</p>
</body>
</html>Příklad se nachází na této stránce.
Zamyslete se se mnou. Jaké možnosti máte, chcete-li, aby se neodsazoval první odstavec za nadpisem? Já vidím následující.
- Definovat prvnímu odstavci třídu, která odsazení zruší
- První odstavec neuzavírat tagem <p>
- Javascriptové řešení
- Využít CSS selektoru „+“ pro sourozence
První řešení, tedy definovat prvnímu odstavci patřičnou třídu, která by odsazení zrušila, je nekomfortní. Píšete-li texty ručně, znamená to pro vás zbytečnou práci navíc. Využíváte-li služeb nějakého CMS, budete velmi pravděpodobně muset upravovat jeho zdrojové kódy. Toto řešení tedy nebude to pravé ořechové.
Druhé řešení, neuzavírat první odstavec tagem <p>, je sémanticky chybné. Je jen na vás, jestli tuto cenu za výsledný efekt zaplatíte.
Třetí řešení, řešení javascriptem, by bylo jednoduché. Stačí znát DOM a poté dynamicky změnit odsazení, pakliže je prvním sourozencem nadpisu právě odstavec. Toto řešení je schůdné, avšak ne perfektní, mnoho lidí (zejména pokročilejších uživatelů) má javascript vypnutý.
Čtvrté řešení je naprosto ideální. Selektor sourozence v CSS nabízí přesně to, co potřebujeme. Pakliže je prvním sourozencem nadpisu tag <p>, odsazení zrušíme. V tuto chvíli webdesignera zamrzí, že v současnosti nejrozšířenější prohlížeč, Internet Explorer, tento selektor nepodporuje.
Co tedy s tím? Rozhodl jsem se vhodně zkombinovat dva poslední body. Šikovnějším prohlížečům nabídneme řešení pomocí CSS selektoru „+“, Internet Exploreru javascriptové řešení přes proprietální expression. Vycházím z toho, že javascript si v drtivé většině případů vypínají pouze zkušenější uživatelé, ale tito také velmi často využívají služeb alternativních prohlížečů, které selektor sourozence zvládají. Pakliže někdo používá Internet Explorer s vypnutým javascriptem, kýžený efekt neuvidí. Je to však pouze kosmetická změna, proto si mohu dovolit nebýt zcela stoprocentní. Jaký je tedy výsledný kód?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />
<title>Paragraph test</title>
<style type="text/css">
p { text-indent: 2em; }
* html p { text-indent: expression( this.previousSibling.tagName.search(/H[1–6]/) == 0 ? "0": ""); }
h1+p, h2+p, h3+p, h4+p, h5+p, h6+p { text-indent: 0; }
</style>
</head>
<body>
<h3>nadpis</h3>
<p>Lorem ipsum dolor sit amet…</p>
<p>Cras porta…</p>
<p>Sed aliquet…</p>
</body>
</html>Do stylopisu přibyly pouhé dva řádky. První řádek je oštřen hackem (* html) tak, že jej přečte pouze Internet Explorer. Následně pro každý tag <p> kontroluji, jestli jeho nejbližší předchozí sourozenec není náhodou nadpis. Pakliže je, změním mu jeho vlastnost text-indent na nulovou hodnotu, není-li, ponechám výchozí hodnotu. Druhý řádek dělá to samé pomocí CSS a aplikuje se pro všechny prohlížeče, které selektor sourozence zvládají (což jsou téměř všechny kromě IE).
Ošetřený kód si můžete prohlédnout zde.
Napadají vás nějaké problémy, které takové řešení nese? Vylepšili byste ho nějak?