Typografické uvozovky na webu

Správná typografie na webu byla odjakživa problematická záležitost. Nejdříve se velmi těžko česká typografická pravidla vnucovala HTML, následně se většinou nedalo přesvědčit CMS editory a hlavně - nikdy nijak nepřimějete dodržovat typografická pravidla "obyčejné smrtelníky". Kvůli zachování duševního zdraví nezbylo než rezignovat a zejména nesprávné uvozovky a předložky na koncích řádků ignorovat.

V takto navozené letargii vám pak snadno unikne užitečnost běžně podporovaného HTML tagu <q> respektive <blockquote>, kterému lze v CSS (2.1) nadefinovat parametrem quotes, jaké má zobrazit kolem v něm uzavřenému textu uvozovky. Nebudeme zabíhat do podrobností, ty si najděte na odkazovaných serverech, ale ukážeme si, jak nastavit správné české typografické uvozovky.

V CSS jednoduše nadefinujeme sadu uvozovek:

div {quotes: "„" "“" "‚" "‘" "»" "«" "›" "‹";}
/* od DIV zdědí uvozovky vnořené Q */

A pak stačí už jen "získat" kód, kde uvozovky nahradíme tagy <q>:

<div><q>Lákamí vůněhulás <q>úmyval rohlivý jednovod</q> lek Dobožek nim úmysl drásníky ří. <q>Já tlínům záprajak tak <q>tavětraje čuvaleda kytanesiv</q> odobzor ačít roští Tor</q>. Sudba večný buby ma kytanesiv mut <q>rostrojsk <q>lehlý <q>mihlenka</q> kamatko</q> lžičkak</q> sestí. Vla škovat říkem.</q></div>

A získáme:

Lákamí vůněhulás úmyval rohlivý jednovod lek Dobožek nim úmysl drásníky ří. Já tlínům záprajak tak tavětraje čuvaleda kytanesiv odobzor ačít roští Tor. Sudba večný buby ma kytanesiv mut rostrojsk lehlý mihlenka kamatko lžičkak sestí. Vla škovat říkem.

Úžasné, že? :-)

P.S. Inspirací mi byl článek The Future Of CSS: Experimental CSS Properties
P.P.S. Když by se to tu tady zobrazovalo nějak divně, nebo se vám zdálo, že to není správně, následujte zmíněné odkazy...