Problém s uvozovkami kolem elementů Q a BLOCKQUOTE 1.
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.
Starší komentáře ke článku
Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.
Mohlo by vás také zajímat
-
AI v programování: Jak používat GitHub Copilot (část 1)
12. února 2024 -
Webdesign: Jak optimalizovat tlačítka na webu
7. března 2024 -
Doména .io v ohrožení: Co přinese předání Čagoských ostrovů?
10. října 2024
Nejnovější
-
Od iPhonu po Android: Ultra HDR přináší nový standard fotografií
1. listopadu 2024 -
AI a internetové podvody
29. října 2024 -
Užitečné nástroje pro bezpečnost na internetu
17. října 2024 -
Jak se chránit před podvody na internetu – část 2
14. října 2024