Problém s uvozovkami kolem elementů Q a BLOCKQUOTE 1.

26. srpna 2002

•

Podle specifikace (X)HTML by interpretory (X)HTML měly automaticky doplňovat uvozovky kolem elementu Q. Realita je ale bohužel značně odlišná, a proto si ve dvou článcích ukážeme, jak naučit všechny moderní prohlížeče (IE 4+, Netscape 6+/Mozilla a Opera 4+) toto pravidlo dodržovat a navíc používat správné české uvozovky. Kromě toho je naučíme dělat uvozovky i kolem elementu BLOCKQUOTE.

Co říká specifikace

Ještě než se pustíme do samotného napravování chyb prohlížečů, podívejme se na to, co říká o elementech q a blockquote specifikace HTML 4.01, z níž pochází i většina sémantických pravidel XHTML. Oba elementy by měly sloužit k uzavírání citací. Element q pro kratší citace, které nevyžadují dělení na odstavce, například citáty, a element blockquote pro delší citace, například úryvky z knihy.

Kolem citací se ve většině jazyků píší uvozovky, což by znamenalo, že by autoři webových stránek museli každou citaci uzavírat do elementu q nebo blockquote i do uvozovek a navíc přemýšlet nad úrovní zanoření uvozovek – tedy jestli se současná citace nenachází uvnitř jiné citace a není proto třeba použít uvozovky ‚‘ místo „“ a podobně.

Proto nechalo W3C ve zmiňované specifikaci vykreslení uvozovek kolem elementu q na interpretech (X)HTML. Jaký druh uvozovek má interpret použít, si měl interpret určit sám podle nastavení jazyka dokumentu. Například v angličtině se používají pro otevírací i uzavírací část uvozovky nahoře, většina evropských jazyků ale používá pro otevírací část uvozovky dole.

Element blockquote měl skončit stejně, ale vzhledem k tomu, že v dřevních dobách webdesignu byl často používán pouze pro odsazení textu a nesplňoval tak svůj sémantický účel, W3C jen doporučilo interpretům, aby umožnily autorům stránek definovat, zda chtějí nebo nechtějí kolem něj vykreslovat uvozovky.

Mechanismus vkládání uvozovek byl v interpretech většinou ošetřen pomocí takzvaných implicitních tabulek CSS – to jsou CSS, ve kterých jsou nastavena implicitní pravidla pro formátování stránky v prohlížeči. Každý moderní interpret obsahuje v současnosti vlastní implicitní CSS. Tato pravidla se ke zformátování stránky použijí, pokud nejsou nastavena jinak autorem stránky (opět pomocí CSS). Interpret (X)HTML, který ovládá vkládání uvozovek kolem elementu q, v nich tedy má obsaženu přibližně takovouto definici:

* {quotes: ‚“‚ ‚“‚ „‚“ „‚“;}
q:before {content: open-quote;}
q:after {content: close-quote;}

V prvním pravidle jsou nastaveny uvozovky pro všechny elementy pomocí univerzálního selektoru * a vlastnosti quotes, která obsahuje vždy dvojici uvozovek za sebou, první otevírací a druhé uzavírací. Takto lze nastavit libovolný počet dvojic uvozovek pro libovolný počet zanoření. Zbývající dvě pravidla nastavují pomocí pseudo-tříd :before a :after obsah vložený před, respektive za element q na speciální hodnoty, kterými jsou open-quote (otevírací uvozovky) a close-quote (uzavírací uvozovky). Právě díky těmto hodnotám bude interpret vycházet z vlastnosti quotes nastavené pro element q – to jsme udělali o řádek výše, kde jsme nastavili tuto vlastnost pro všechny elementy. Důležité je, že při těchto hodnotách se bude interpret starat i o zanoření uvozovek, které se bude navíc počítat nejen pro elementy q, ale i pro jakékoli jiné elementy, které budou mít nastavenou vlastnost content na uvozovkové hodnoty (například element blockquote, viz dále).

Obsah, generovaný pomocí vlastnosti content, dědí CSS vlastnosti prvku, ze kterého je generován, pokud jsou dědičné (například color, vlastnosti písma a podobně). Pokud dědičné nejsou, je jim přiřazena implicitní hodnota. Tento obsah nijak neovlivňuje strom dokumentu, není tedy součástí žádných uzlů (nodes), s čímž je třeba počítat při psaní DOM aplikací.

Navíc by podle specifikace měly být v implicitních CSS obsaženy různé další uvozovky pro další jazyky (pomocí pseudo-třídy :lang). Podle mého názoru je ale tento požadavek trochu moc náročný, zvlášť když si každý webmaster může uvozovky na své stránce nastavit (víz dále).

Jak se to má v praxi

Jak vidíte, podpora automatického vkládání uvozovek je v podstatě závislá na tom, jestli interpret ovládá vlastnosti generovaného obsahu v CSS. Ty bohužel dodnes nezná IE (ani ve své šesté verzi), naopak je již zná Netscape 6+/Mozilla a Opera od čtvrté verze. Pokud se ale podíváte na první příklad, zjistíte, že ani zde to není až tak ideální.

IE tedy neudělá vůbec žádné uvozovky (nyní mluvím o IE 4 až 6 pro Windows, jak se to má s IE 5 pro Mac netuším, pokud s tímto prohlížečem pracujete, budu rád, když v diskusi popíšete jeho podporu elementu q), Opera a Netscape 6+/Mozilla udělají „neutrální“ uvozovky „“, již ale zapomínají na zanořování. Mozilla 1.1 navíc obsahuje chybu, díky které „zapomene“ na otevírací uvozovku u druhého elementu q (před slovem „Marie“). Tím bych se ale příliš nezatěžoval, jedná se zřejmě pouze o chybu v konkrétní verzi, která bude brzy opravena.

Jak vidíte, implicitní chování prohlížečů je v tomto ohledu vcelku tristní. Možná vás napadne, že by proto bylo nejlepší automatické uvozovky vypnout (což jde vcelku snadno pomocí CSS pravidla q {quotes: "" "" "" "";}) a psát je ručně. Toto řešení ale není zrovna ideální, protože ne každé zařízení pracující s webovou stránkou zároveň pracuje i s jejím CSS, přičemž význam těchto zařízení neustále stoupá a řadí se mezi ně třeba i vyhledávací a indexovací roboti. Taková zařízení by potom kolem elementů q doplnily ještě jedny uvozovky (protože jim to ukládá specifikace), čímž by váš text, mírně řečeno, „ozvláštnily“. A podle mě není správné, aby zařízení, dodržující standardy, obdržela špatnou stránku jen kvůli tomu, že současné prohlížeče tyto standardy zcela nedodržují. Navíc byste stejně museli v budoucnu, až by se prohlížeče naučily správně interpretovat element q, tyto uvozovky ze svých textů odstranit, pokud byste chtěli jít se standardy. Bude tedy třeba nějak současné prohlížeče naučit dělat uvozovky kolem q správně.

Nastavení v CSS

Nejprve bychom potřebovali nadefinovat uvozovky podle českých pravidel. To uděláme pomocí následujícího pravidla v CSS:

* {quotes: „„“ „““ „‚“ „‘“ „»“ „«“ „›“ „‹“;}

Pro obyčejné citace se tedy využijí klasické uvozovky „“, s rostoucí úrovní zanoření se potom budou objevovat méně časté uvozovky.

Navíc, jak jsme již řekli, budeme se chtít řídit doporučením specifikace, a proto nastavíme uvozovky i před a za element blockquote:

blockquote > p:before {content: open-quote;}
blockquote > p:after {content: close-quote;}

Jak možná víte, do elementu blockquote se nedá přímo vkládat text, a proto ho musíme formátovat do odstavců nebo podobných prvků. Já jsem si vybral právě ty odstavce. Pomocí výše zmíněných pseudo-tříd a vlastnosti content před a za každý odstavec nacházející se přímo v elementu blockquote (odstavec musí být jeho dítětem) vkládám příslušné uvozovky, které jsem nastavil pomocí univerzálního selektoru výše. Tyto uvozovky budou ovlivňovat i zanoření, pokud tedy uvnitř odstavce v blockquote použiji element q, objeví se kolem něj uvozovky nastavené v pořadí jako druhé, tj. ‚‘.

S tímto nastavením již zobrazí uvozovky naprosto správně Opera, Netscape 6+/Mozilla však použije pouze první dvojici uvozovek, a to i pro vnořené citace (zanoření tedy neovládá). IE neudělá opět nic, protože vlastnosti generovaného obsahu neumí.

Příště si ukážeme, jak dostat uvozovky i do IE 4-6/Win, a také si opravíme chybné zanořování uvozovek v Netscape 6+/Mozille.