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>Pa­ragraph 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?

Řešení

<!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>

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?

5. 11. 2005, 16.10 | Typografie, Javascript, AJAX.


58 komentářů k “Typografická fičůrka”

  1. Acci říká:

    2. Napadají. Nefunguje to v IE 5.0. :))

    A v IE 5.0 se ti taky rozpadá tento web. Vím, že pětkovou řadu už skoro nikdo nepoužívá, ale teď jsem nucen na něm pracovat :-(

    5. 11. 2005 v 17.17

  2. Šlaha říká:

    3. Můžu se zeptat, jak toto udělat, pokud mám před nadpisem ještě div?

    <h2>Nadpis</h2> <div>Lišta o článku (je to několik divů)</div> <div class="contentbody"> <p>Článek</p>

    Zkouším to, ale moc se mi nedaří

    5. 11. 2005 v 17.17

  3. Dero říká:

    4. Acci: Funguje, jen jsem odkazoval na špatný soubor. Odkaz je opraven a v IE 5.0 mi funguje. A stejně tak se mi v IE5.0 web zobrazuje identicky jako v IE6 či Firefoxu.

    Šlaha: V takovém případě IMHO není potřeba to ošetřovat, protože je mezi nadpisem a odstavcem jiný textový element. Máš konkrétní příklad?

    5. 11. 2005 v 17.22

  4. Dero říká:

    5. Acci, omlouvám se, koukl jsem na to a měl jsi pravdu. Textarea mi rozhodila layout, už je opraveno.

    5. 11. 2005 v 17.30

  5. Jódlující bernardýn říká:

    6. A co použít pseudoprvek first-line?

    5. 11. 2005 v 17.55

  6. Šlaha říká:

    7. [3] Dělá to RS Nucleus. Ale mám to zatím jenom na localhostu.

    5. 11. 2005 v 18.27

  7. meca říká:

    8. [5] First-line? Sry, ale myslim, že by to ničemu nepomohlo…

    A jinak… To neni fičůrka, ale FIČŮRKA… Jinak řečeno ptákovina, IMHO ;) I když jako chápu, že je to prostě tak…

    Navíc se mi odsazení na webu vůbec, ale vůbec nelíbí. Nevím, možná je to o zvyku, ale zdá se mi to naprosto ungrafický…

    5. 11. 2005 v 18.35

  8. Jódlující bernardýn říká:

    9. meca. jestli to dobře chápu, Dero chce dosáhnout "neodsazování" prvního odstavce. Tak proč klasicky nenastavit přes CSS celému p odsazení a pak přes first-line prvnímu odstavci zalamování nezrušit? Tak to bude fungovat ve všech prohlížečích stejně…

    5. 11. 2005 v 19.40

  9. meca říká:

    10. Jódlující bernardýn > Tak teďkon tě absolutně nechápu. Ale každopádně se tam bude muset dávat opět náký selektor, aby se poznalo, zda-li je ten odstavec první pod nadpisem… A ten selektor opět nebude v IE fungovat… IMHO ;)

    5. 11. 2005 v 21.17

  10. klokyn říká:

    11. Ja osadzujem odstavec každý… Ani som nevedel že po nadpise sa neosadzuje. Ja to budem zrejme naprávať len pomocou tried.

    Inak v prvej vete tohoto článku je zrejme zlý odkaz na tvoj web o typografii.

    5. 11. 2005 v 21.56

  11. Dero říká:

    12. 5: To by vážně nikterak nepomohlo. Mluvím o jednotlivých odstavcích, nikoliv řádcích.

    6: Ano, ale ten tuším používá řešení č. 2 – neodsazení realizuje vynecháním tagu <p>

    7: Neberu Ti Tvůj názor, ale kdyby ses zajímal o typografii, věděl bys, že až taková pitomost to není. Typografie je ale okrajová věda a je to vidět.

    5. 11. 2005 v 23.00

  12. meca říká:

    13. [11] Já něřikám, že je to pitomost… Já jen trochu neohrabaně říkám, že se mi zdá poněkud podivné kvůli tomutu dělat takovýto machynace… ALe proti gustu…

    5. 11. 2005 v 23.40

  13. Dero říká:

    14. 12: Ale jaké machinace? Někomu to třeba pomůže. Tohle řešení jsem ještě nikde neviděl, tak jsem si jej dovolil publikovat. Jedná se o pouhé dva řádky kódu, to myslím za výsledný efekt stojí. Kdyby se mělo psát jen o životně důležitých věcech, to by to vypadalo. Právě takovéto drobnosti jsou to, co člověka začne zajímat, když ty "velké" věci jakž takž zvládne.

    Já nevím, co je špatného na tom, psát o okrajových tématech, která sice zaujmou jen pár "vyvolených", ale o to více je potěší? Proč nepsát i o zdánlivých zbytečnostech? Ano, web by opravdu dál fungoval s odsazením prvního odstavce po nadpisu, ale proč neříct, že to jde jinak a snadno?

    5. 11. 2005 v 23.48

  14. Medhi říká:

    15. Osobně pro tvorbu čehokoli, kde se dá typografie aplikovat používám svého citu, protože nejsem nijak v této vědě odborně vzdělán. Velmi mě ale tento obor zajímá, protože většinou zaručuje, že výsledek bude lahodit oku, což je pro mě velmi důležité.

    Tenhle nápad je velmi zajímavý.

    6. 11. 2005 v 0.12

  15. meca říká:

    16. [13] Kliid ;) Já to nemyslim, až takhle… Kdybych mě to třeba napadlo, tak bych to také napsal… Avšak prostě můj názor je, že to stejnak moc lidí využívat nebude… I když kdo ví…

    6. 11. 2005 v 8.46

  16. pepiino říká:

    17. Skvělé, taky už mi několikrát přišlo na mysl, jak tohoto vlastně dosáhnout. Díky.

    6. 11. 2005 v 11.27

  17. llook říká:

    18. Já doteď používal tohle:

    /* odsazení v MSIE */
p { text-indent: 1em; }

/* první nebo následující po neodstavci */
p:first-child,
* + p { text-indent: 0; }

/* následující po odstavci */
p + p { text-indent: 1em; }

    V Opeře a Gecku to odsadí jen odstavec následující po jiném odstavci. Akorát jsem si říkal, že je škoda že to nejde v MSIE, na expressions jsem si nějak nevzpomněl.

    Nejsem si jistý, co na to typografové, ale třeba po výpisech kódu nebo po tabulkách a obrázcích také neodsazuji.

    6. 11. 2005 v 12.32

  18. Dero říká:

    19. 17: A neodsazuješ asi správně, llooku. Ale třeba po citacích či vložených řádkových textech (různé divy) bys zase odsazovat měl. Ono řešení se dá jednoduše rozšířit i o další elementy.

    6. 11. 2005 v 21.32

  19. Adam Šnobl říká:

    20. V prvé řadě musím vyjádřit svou úctu velice pěknému designu tohoto blogu. Popravdě je mi potěchou pro oko – správné použití uvozovek, pomlček či výpustek se nevidí často. A teď k věci: můj názor je, že pokud je odstavec graficky oddělen prázdnou řádkou, nemá odsazování od kraje smysl. Buď prázdná řádka, nebo odsazení. Z tohoto pravidla vyplývá i Vámi uváděné pravidlo, že první řádek se neodsazuje – právě proto, že je oddělen prázdnou řádkou po nadpisu. Další řádky už se odsazují, neboť prázdnou řádkou odděleny nejsou.

    7. 11. 2005 v 16.54

  20. dENIS říká:

    21. Přkláním se k názoru Adama Šnobla – buď volný řádek nebo odsazení na prvním řádku a cituji z Typografického manuálu (V. Beran a kol.):
    Odstavce bez odsazení je možno použít tam, kde není nutné zvýraznit odstavcovou úpravu. Pokud však u tohoto způsou úpravy přece jenom potřebujeme odstavce potřebujeme zvýraznit, použijeme proložení volným řádkem. Oddělování odstavců volným řadkem je použitelné pouze pro kratší části textu (interviev), ale v žádném případě se nehodí pro dlouhé souvislé texty.

    7. 11. 2005 v 20.08

  21. Jan Brašna říká:

    22. S expressions jsme si taky užili, některé buildy IE hlásily všelijaké nekonkrétní chyby v načítání atp., takže se mu také snažím maximálně vyhnout.

    8. 11. 2005 v 23.12

  22. Derův zápisník » Archív » Typografická fičůrka II. (a lépe!) říká:

    23. […] I. (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řipra […]

    13. 12. 2005 v 23.15

  23. Petr Stříbný říká:

    24. [19][20] Možná, že se správně u odsazení mezera dělat nemá, ale když to vede k vyšší přehlednosti a text se snáze čte?

    Dávám přednost čitelnosti.

    8. 7. 2006 v 0.04

  24. Solvent Flex říká:

    25. <dsafd temperature sensor manufacturerair compressor

    14. 11. 2009 v 4.26

  25. cheap products říká:

    26. rgfdg china wholesale distributor We sell bulk wholesale

    14. 11. 2009 v 4.27

  26. Hermes handbag říká:

    27. dsafdf replica handbags, Wholesale replica handbags

    14. 11. 2009 v 4.27

  27. trademic.com říká:

    28. [url= http://www.trademic.com/…fl&bid=.html ][b][size=150]nfl wholesale nfl jersey wholesale[/size][/b][/url]

    8. 1. 2010 v 7.04

  28. replica gucci handbags říká:

    29. dfreplica handbagsdff

    1. 3. 2010 v 8.02

  29. lady bags říká:

    30. its all handbags lady bags golf bags

    9. 4. 2010 v 4.47

  30. replica watches říká:

    31. replica watches
    cheap replica watches
    replica A.Lange & Sohne<BR

    26. 4. 2010 v 6.15

  31. gucci shoes říká:

    32. 3. LV GUCCI CHANEL CHOLE BAPE handbag&wallets. 4. BAPE ROLEX TISSOT OMEGA wrist watches.puma shoes 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.46

  32. shox r4 říká:

    33. S expressions jsme si taky užili, některé buildy IE hlásily všelijaké nekonkrétní chyby v načítání atp., dunk low pro sb short sleeve polo shirt fashion t shirts takže se mu také snažím maximálně vyhnout.

    9. 5. 2010 v 14.46

  33. jersey říká:

    34. I've been to China travel, in my opinion chinese people are very freidly, and i especially like the city of beijingshenzhen, i have a friend from china, i ike her blog discount china, now she is in Jewish, just now, she send me a Jewish Directory website, i think the it is very useful. Toto řešení tedy nebude to pravé ořechové.

    10. 5. 2010 v 3.20

  34. omega watches říká:

    35. How to detect whether your watch are magnetize_Watch Knowledge_Sale
    Tissot Watch Brand Introduction_Watch Knowledge_Sale
    Guide to purchase watches in Hong Kong_Watch Knowledge_Sale
    To buy three versions of watches in HongKong_Watch Knowledge_Sale

    15. 5. 2010 v 3.13

  35. ALange Sohne říká:

    36. Jsem filmový fanoušek. Viděl jsem v životě více filmů, než zkušený warezák stihne stáhnout za dva měsíce.Tiffany Bangles Na druhou stranu vám nepovím, kolikrát spolupracovali Steve Buscemi a Tim Burton, ani nemám zcela vyhraněný názor na to,Baltimore Ravenskterý Al Pacinův film je ten nejhorší a také po obvzášť vydařené premiéře kvalitního filmu nesnídám s Františkem Fukou. cheap five fingers shoesJsem tedy průměrný divák s trochou ryzí lásky ke kvalitní kinematografii, anime a hudbě Ennia Morriconeho.ALange Sohne

    18. 5. 2010 v 8.59

  36. fa říká:

    37. This is my comment rolex replica
    韩国

    2. 6. 2010 v 7.54

  37. johnsupra shoes říká:

    38. Tom Penny and Antwian Dixon. Apart from a large fan base compromising skateboarders, supra vaider high tophas also aught the attention of the music industries big names such as Jay-Z, Justin Timberlake and Lil Wayne.supra vaider black high boots, it is the main creative recreation sneakers teal we push in our online shop these days.

    30. 6. 2010 v 8.03

  38. Replica Armor říká:

    39. Thanks for sharing, interesting reviewes at: Cafe Well Bug Dream World Boolfish

    1. 7. 2010 v 6.37

  39. sdfsd říká:

    40. gucci bags sells Designer Handbags and has a pretty good selection. I have not seen the quality of the merchandise myself but I know that they are legit.tjt

    12. 7. 2010 v 10.58

  40. Gucci Outlet říká:

    41. Thank you very much.gucci bags sale gucci gucci handbags cheap gucci bags http://www.guccis.net

    21. 7. 2010 v 4.12

  41. Gucci Outlet říká:

    42. Thank you very much.gucci bags sale gucci gucci handbags cheap gucci bags http://www.guccis.net

    21. 7. 2010 v 4.13

  42. hollister uk říká:

    43. hollister uk ，aybe hehe

    26. 7. 2010 v 10.33

  43. UGG Classic Tall Boots říká:

    44. [url=http://www.uggboots5815.com]UGG Boots,UGG Boots 5815[/url]

    27. 7. 2010 v 10.05

  44. UGG 5825 říká:

    45. UGG Boots 5163, 02.

    28. 7. 2010 v 4.59

  45. UGG 5825 říká:

    46. UGG Classic Short Boots /***

    28. 7. 2010 v 6.40

  46. UGG 5825 říká:

    47. ghd hair straighteners, ghd styler //

    28. 7. 2010 v 6.47

  47. Gucci Handbags říká:

    48. Gucci Handbags,Gucci Bags //////////

    28. 7. 2010 v 6.54

  48. Gucci Handbags říká:

    49. UGG Boots,UGG Classic Boots **-/

    28. 7. 2010 v 7.05

  49. UGG Classic Cardy říká:

    50. These well-known UGG Classic Cardy are now becoming more and more fashionable and popular, to some extent. I believe you may ask what the shoes can bring us. As I know, if one person struck by lightning in Holland, his family must put all his Classic Cardy Boots up as soon as possible. And in the fairy tale, the shoes are more magic indeed. Now, I always say that the UGG Classic Cardy Boots are so magic and popular.http://www.uggscardy.com ****--*

    28. 7. 2010 v 7.16

  50. wholesale china říká:

    51. The extremely very same applies when commencing a retail organization with Dvd videos. By getting wholesale Dvd disks at bargain prices- you assure your self through the incredibly very best solution income and, as a result, the greater net earnings in return for your solution revenue. To tell you a little more, I started browsing the World-wide-web for just about any dvd wholesale Electronic movie disc list that could give me the costs I was trying to find the two my Dvd movie series and my determination to construct a Electronic video clip disc store group from your future either for the internet or offline.

    30. 7. 2010 v 9.56

  51. abercrombie říká:

    52. It's always nice when you can not only be informed, but also engaged! [url=http://www.abercrombiemilano.com] abercrombie and fitch [/url]

    30. 7. 2010 v 15.20

  52. tiffany uk říká:

    53. I have to admit to a raisedtiffany uk eyebrow with this as welldood sdjiucxn happy

    2. 8. 2010 v 10.19

  53. womens ugg boots říká:

    54. Not even as I shook womens ugg boots and trembled uncontrollably in the trenches, did I forget your ugg boots face. I would sit huddled into the wet mud, terrified, as the ugg australia hails of bullets and mortars crashed down around me. WYQ

    16. 8. 2010 v 1.38

  54. Wholesale accessories říká:

    55. Whenever Wristband Braceletyou purchase a kit for yourself or for your business, Rubber Glovesmake sure it includes all the extras that come along the package. Cup HolderDon't forget to avail any discounts and bargains that are readily available.

    17. 8. 2010 v 3.19

  55. louis vuitton wallet říká:

    56. Online buy Louis Vuitton Outlet at wholesale price from lv handbags online store, 24/7 live service, Free Shipping and accept PayPal.louis vuitton galliera pm

    1. 9. 2010 v 6.31

  56. gucci outlet říká:

    57. nice post. thank u. by the way, welcome to gucci hobo gucci online, in this shopping website, you can find the most cost-effective gucci handbags.

    5. 9. 2010 v 18.56

  57. boots říká:

    58. I ran across search engines and find this blog that fulfill my needs. There is a thing I do not agree ugg cardy boots but It doesn't matter since I think it does not hurt the whole content.ugg boots Watchesdesigning, bailey button ugg bootsbusinesses associated with tattoo Swiss Watchesdesigning,

    6. 9. 2010 v 8.52

  58. NFL Jersey říká:

    59. NICE ARTICLE AND THANKS FOR SHARING

    8. 9. 2010 v 8.07

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.