Typografická fičůrka II. (a lépe!)
Když jsem publikoval článek o drobné typografické fičůrce, netušil jsem, jaká překvapení mi tato zdánlivě jednoduchá konstrukce připraví.
Byl jsem varován
Čtu mail. Plaváček si stěžuje, že jeho Internet Explorer tedy můj web nezobrazí, ani kdyby se rozkrájel. Své tvrzení dokládá přesvědčivým obrasejmem, jemuž vévodí rudá chyba monstrózních rozměrů. S neblahým tušením hledám modré „éčko“ a svůj web v něm zkoumám. A opravdu, weblog produkuje javascriptovou chybu. Vzhledem k tomu, že jediný můj javascript na stránkách (nepočítám-li toplistí počítadlo) je nově přidaný kód, který zaručuje neodsazení prvního řádku po nadpisu, jsem doma. Zvědavě nakukuji (ve dvou dnech už podruhé) k Medhimu, který můj kód také implementoval, a zjišťuji, že u něj se chyba neprojevuje. Cítím se méněcenně. Koukám zoufale na původní 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>Analýza
Možnou chybu nalézám záhy. Velkomožně totiž v původním skriptu nekontroluji, má-li odstavec vůbec nějakého předchozího sourozence, a rovnou přistupuji k jeho metodám. Přidávám tedy podmínku a testuji na jednoduché šabloně.
<!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 ? 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>
<p>Lorem ipsum dolor sit amet…</p>
<p>Cras porta…</p>
<p>Sed aliquet…</p>
</body>
</html>Vše funguje k mé spokojenosti, uploaduji tedy mé řešení na server a jdu se přesvědčit, že problém neexistuje. Jenže on existuje nadále. Tomu nerozumím, vrtám se ve zdrojovém kódu a stále jsem nešťastný.
Jádro pudla
Uplynulo mnoho desítek minut. Pozoruji podezřelou konstrukci a říkám si, že tím to přece nemůže být. Wordpress mi generuje číslovaný seznam s komentáři tak, že tag <p> je sourozencem <li> a je tedy přímým potomkem <ol>. Uvědomuji si, že něco takového není přípustné, a inkriminovaný kód zapoznámkuji. Dobrá věc se podařila. Jakýkoliv pokus o přístup k metodám předchozího sourozence se nezdaří, nachází-li se výchozí tag v zakázaném kontextu. Taková věc se však může přihodit komukoliv, odstranit nevalidní konstrukci by nebylo řešení, kód musí být blbuvzdorný. Rozhoduji se tedy k drastickému řešení. Přepisuji javascript z expression do externího HTC souboru, který následně načítám pomocí CSS vlastnosti behavior. V tomto skriptu vypínám výpis chyb a je hotovo. Skript funguje, doufám, bezchybně v IE5+.
Výsledkem jsou dva soubory – HTML a HTC.
test.html
<!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 { behavior: url("ie-indent.htc"); }
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>ie-indent.htc
<component>
<script>
function stoperror(){
return true
}
window.onerror=stoperror;
if (element.previousSibling != null) { element.previousSibling.tagName.search(/H[1-6]/) == 0 ? element.style.textIndent = "0": ""; }
</script>
</component>