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>Pa­ragraph test</title>

    <style type="text/css">

      p { text-indent: 2em; }
      * html p { text-indent: expression( this.previousSi­bling.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>Pa­ragraph 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>Pa­ragraph 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>

Pakliže budete tento kód používat, nezapomeňte upravit název a cestu k HTC souboru v definici vlastnosti behavior. Upravený kód používám zde na weblogu. Zpozorujete-li jakékoliv neobvyklé chování, informujte mne o tom, prosím. Doufám, že tento druhý díl je zároveň poslední a že tento kód už je víceméně finální.

7. 11. 2005, 21.39 | Typografie, Javascript, AJAX.


38 komentářů k “Typografická fičůrka II. (a lépe!)”

  1. Tomáš Kučera říká:

    2. He, a ja z toho byl tak strasne rozladeny kdyz jsem nemohl rolovat na tve strance pres zmacknute kolecko :-D Nebo dokonce selektovat kus textu… Dokonce jsme si na chvili vypnul i JS…!

    7. 11. 2005 v 21.53

  2. Dero říká:

    3. Omlouvám se, Tomáši, velice se omlouvám. Věř mi však, že Tvoje rozladění byla jen jemná disharmonie proti skřípotu v mé hlavě. :o)

    7. 11. 2005 v 21.56

  3. Leo říká:

    4. To myslite vazne, neco takovyho kvuli prvnimu odstavci, a jeste do toho tahat htc? Leo

    7. 11. 2005 v 21.56

  4. Dero říká:

    5. Ano, Leo, myslím. Neříkám, aby se všichni sebrali a začali to používat. Jen ukazuji, jaká úskalí takovýto triviální, základní typografický problém nese a jak je lze překonat.

    Proč nepsat i o takových věcech? Dá se říct, že trhám fialky dynamitem, ale nemyslím si, že zcela bezúčelně.

    7. 11. 2005 v 22.05

  5. Hellish říká:

    6. Dobrý příspěvek, nenechte se odradit bručouny.

    Skoro bych řekl, že použití htc by bylo vhodné, i kdyby k popisované chybě nedocházelo. Oddělení funkční části webu od obsahu je správný směr. Pokud se ta "funkčnost" týká jenom vzhledu, tím spíše patří mimo hlavní dokument.

    7. 11. 2005 v 22.33

  6. Leo říká:

    7. "Oddělení funkční části webu od obsahu je správný směr. Pokud se ta "funkčnost" týká jenom vzhledu, tím spíše patří mimo hlavní dokument."

    Samozrejme, ale standardnim zpusobem (JavaScript/DOM), ne udelatky jako je htc. A odsazeni prvniho radku neni funkcnost, ale vzhled. Jako cviceni dobry, ale jinak… Leo

    7. 11. 2005 v 22.37

  7. Hellish říká:

    8. Rád se nechám poučit, ale já neznám žádnou jinou metodu jak oddělit důsledně javascript od dokumentu než pomocí HTC. Takže bych tomu neříkal udělátko, ale moc šikovný nástroj.

    7. 11. 2005 v 23.13

  8. Medhi říká:

    9. Díky za ten výzkum a dokonce přímou radu pro mě v minulém článku. Nové řešení se ale už opravdu zdá být možná zbytečně složité pro člověka jako jsem já, který přesná prvidla typografie tolik neuvctívá. Možná se vrátím zpět k neodsazení. ak už zde bylo někde uvedeno, pravidla nejsou porušena, pokud toho nelze nějak rozumě dosáhnout. Budu se tedy utěšova tímto.

    7. 11. 2005 v 23.30

  9. spud říká:

    10. Pekne, jen taky nejsem moc zastancem htc reseni. Neslo by ale to osetreni chyb dat primo do expression? Zkusil jsem ho tam pridat… ale nevim, jak nasimulovat ten chybovy stav, cos popisoval.

    * html p { text-indent: expression( window.onerror = new Function('return true'); this.previousSibling ? this.previousSibling.tagName.search(/H[1-6]/) == 0 ? &quot;0&quot;: &quot;&quot; : &quot;&quot;); }
    8. 11. 2005 v 8.59

  10. Jakub Vrána říká:

    11. Já bych si tak přísná kritéria nedával. Pokud chci, aby se výsledek zobrazoval správně, musí být kód v první řadě validní. &lt;p&gt; jako potomek &lt;ol&gt; není validní ani zdaleka a nic mi nezaručí, že se zobrazí tak, jak očekávám. Podle mě by stačilo tento kód napsat tak, aby fungoval s jakýmkoliv validním HTML.

    8. 11. 2005 v 9.57

  11. Dero říká:

    12. Jakub Vrána: Já třeba ano. CMS může udělat chybu a v takovém případě, kdy je porušena struktura dokumentu, Internet Explorer šílí. V určitých případech nabízí stránku opakovaně k ladění (protože při jakékoliv manipulaci s oknem prohlížeče je třeba expression vykonat znovu) a to je nepřípustné.

    Pokud si je někdo zcela jistý, že struktura jeho webu je zcela v pořádku, tak pro něj platí kód, který uvádím v části Analýza.

    spud: Zkoušel jsem kvantum metod. Této jsem dával největší šance na úspěch do chvíle, kdy jsem si uvědomil, že v CSS sekvence pravá závorka středník uzavírá definici současné CSS vlastnosti. A opravdu, Explorer přednostně uzavře definici CSS a poté si postěžuje na chybějící závorku v definici funkce. Nedokázal jsem to obejít – na druhou stranu, javascript neovládám nikterak extra dobře, kdybys našel nějakou cestičku, byl bych jen rád.

    8. 11. 2005 v 15.37

  12. *Čvachta* říká:

    13. Dero, musím říct, zajímavé řešení, ale opravdu bych ho v praxi nepoužil. Není přece jenom lepší dát tam tu třídu ? ;o)

    Zajímavé, ale prasácké. Jinak musím říct že je fajn že věci dotahuješ do konce.

    8. 11. 2005 v 20.16

  13. Dero říká:

    14. Čvachta: U menších projektů možná ano, ale u velkých webů plných textů se těchto pár řádek vyplatí. Zvlášť pokud to pravidlo aplikujeme zpětně na hotový obsah.

    8. 11. 2005 v 21.22

  14. Roj říká:

    15. Zajimavy clanek, zajimavy blog. Ale moje filosofie je, ze kdo chce videt stranky dobre, poridi si adekvatni browser. Kvuli ocazeni prvniho radku tolik tun kodu, a to vsechno kvuli chybe jednoho browseru – nic pro me :-)

    9. 11. 2005 v 11.07

  15. silencer říká:

    16. Chyba je podle me ze volate DOM property na node jez takovou property ani mit nemusi. Stacilo by pred pouzitim vlastni metody zkotrolovat jestli node tuto property vubec ma. Takze ve Vasem pripade

    if (node.tagName !== undefined) { node.tagName == ‚neco na porovnani‘; }

    A ano je nutno pouzit identicke porovnani, node.tagName != undefined nebo obecneji !node.tagName nepomuze, ach jo testovat undefined je vubec v javascriptu „radost“.

    25. 5. 2007 v 9.16

  16. silencer říká:

    17. Hmm koukam ze jsem tam sam zapomel dalsi podminu takze misto node.tagName == ‚neco na porovnani‘; si doplnte jakekoli pouziti node.tagName . :)

    25. 5. 2007 v 9.20

  17. Replica Watches říká:

    18. 048,Rolex – Replica Rolex -

    5. 9. 2009 v 9.47

  18. dsdf říká:

    19. <h1>buy shoesiphone 3gs wholesale无为人生</h1>

    31. 12. 2009 v 3.31

  19. dsdf říká:

    20. <h1>tiffanychina iphonewholesale fashion</h1>

    31. 12. 2009 v 3.31

  20. sdf říká:

    21. srerwholesale nfl</br>ser wholesale mbt shoes</br>sd wholesale abercrombie</br>fdserr

    3. 3. 2010 v 9.15

  21. Christian Louboutin Shoes říká:

    22. As days are advancing, more and more Christian Louboutin Shoes recent innovations are brought into these Men's casual

    16. 4. 2010 v 5.02

  22. replica watches říká:

    23. replica watches
    replica Maurice Lacroix watches
    replica Rolex DateJust<BR

    26. 4. 2010 v 6.29

  23. gucci shoes říká:

    24. 1 shoes: NIKE (air force one, air max, air shox, tn, dunk), Jordan, BAPE, ICECREAM,GUCCI,TIMBERLAND,PRADA,PUMA,JAMES,MEN BOOT,UGG BOOT. wikishoes fashion blog wholesale jordan shoes wholesale puma shoes 2. Apperal: POLO BURBERRY BAPE BBC Evisu EDHARDY, T-shirts; EVISU BAPE BBC D&G A&F Ed-hardy hoodies; EVISU RED MONKEY BAPE BBC jeans. NEW BAPE hat&caps.

    9. 5. 2010 v 14.44

  24. gucci shoes říká:

    25. 3. LV GUCCI CHANEL CHOLE BAPE handbag&wallets.wikishoes fashion blog 4. BAPE ROLEX TISSOT OMEGA wrist watches.air yeezy shoes jordan six rings 5. CHANEL GUCCI LV D&G PRADA sunglasses, there are many new styles and colors for you

    9. 5. 2010 v 14.45

  25. hollister uk říká:

    26. hollister uk

    26. 7. 2010 v 10.48

  26. hollister uk říká:

    27. hollister ukgood thio

    26. 7. 2010 v 10.49

  27. UGG Classic Tall Boots říká:

    28. [url=http://www.uggboots5815.com]UGG Classic Boots,UGG Boots Classic Tall[/url] [url=http://www.uggboots5815.com]UGG Classic Tall Boots,UGG Boots 5815[/url]

    27. 7. 2010 v 10.01

  28. abercrombie říká:

    29. It's always nice when you can not only be informed, but also engaged! abercrombie fitch

    30. 7. 2010 v 15.40

  29. abercrombie říká:

    30. It's always nice when you can not only be informed, but also engaged! abercrombie fitch

    30. 7. 2010 v 15.41

  30. tiffany online říká:

    31. Well said, such a person should be a good sentenceed eyebrow with this as welltiffany outlet7894543213 dnsjfuhn sdfijkhf

    2. 8. 2010 v 10.57

  31. oil paintings říká:

    32. You made fantastic nice points here. I performed a search on the issue and discovered almost all peoples will agree with your blog. oil paintings discount paintings

    6. 8. 2010 v 3.07

  32. Wholesale accessories říká:

    33. Good,Greet,The market research can also be done using the internet giving you peace of mind and saving of time. Wholesale AccessoriesTherefore, make your search effective to get the effective supplies results. There are a number of wholesale suppliers in the market offering some reallyChina Wholesale nice assortments of tattoo kits at really reasonable and inexpensive prices. You're just required to dig thosetattoo machine wholesale suppliers out and benefit from their eye catchy deals and offers.

    11. 8. 2010 v 2.39

  33. Wholesale Accessories říká:

    34. Good,Greet,Kawasaki Z1000The market research can also be done using the internet givingKawasaki ZX12R you peace of mind and saving of time.Therefore, Suzuki GSX R1000make your search effective to get the effective supplies results.

    23. 8. 2010 v 10.09

  34. jordan 15 shoes říká:

    35. jordan 15 shoes jordan 16 shoes

    2. 9. 2010 v 10.59

  35. UGG Boots říká:

    36. Good,Greet,The market research canUGGS also be done using the internet giving you peace of mind and saving ugg 5803of time.Therefore, make your search effective to UGG Boots Classic Shortget the effective supplies results.

    7. 9. 2010 v 2.57

  36. kemaner říká:

    37. <P>　　military sweep replica watch</P> <P>　　military sweep the table the same as the design of their own simple race to become the object of counterfeiters. Now need to open the table cover to distinguish between true and false,  to identify. But recently the BR series of simulated table techniques have improved, and covers many tbecause the fake form of mechanical body to be nothing out of the ordinary than the real replica watch.So far, BR01 series of four unique teeth lock screw is relatively easy ypes and colors.Audemars Piguet Royal Oak Offshore Titanium replica watch was fake a long time</P>

    9. 9. 2010 v 9.01

  37. Nike Air Jordan říká:

    38. You have some really good articles on your blog. I also like the theme and theNike Air Jordan
    layout as well. excellent work!

    10. 9. 2010 v 9.36

  38. Timberland Boots říká:

    39. I'm really involved with this topic. When can I find out more selective details Timberland Boots all-around this? Or, when you can pursue this further more here.

    10. 9. 2010 v 9.36

Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.