Jak zkrotit vodorovnou čáru v CSS

Pro optické zvýraznění horizontálního dělení obvykle textových bloků se často využívá i vodorovné čáry, pro kterou v XHTML existuje nepárová značka „hr“. Pokud však tvůrce stránek neví, jak přizpůsobit její zobrazení k obrazu nejen svému, ale i pro prohlížeče ostatních uživatelů, bývá spíše ke škodě než k užitku.

Český termín vodorovná čára je sice vžitý, nicméně nepřesný. Jméno značky hr znamená horizontal rule, tedy horizontální oddělovač, což také prohlížeče interpretují vykreslením úzkého obdélníku přes celou šířku aktuálního objektu, v kterém se značka nachází (tělo dokumentu, buňka tabulky apod.), přičemž horní okraj obdélníku prohlížeče vykreslují tmavší než spodní. Již zde se však interpretace různých prohlížečů rozcházejí.

Problém základního zobrazení

Bez udání dalších parametrů vykresluje Internet Explorer vodorovnou čáru jakožto obdélník výšky dva pixely, zatímco Mozilla tři pixely. Zdánlivě nepatrný rozdíl je opticky jasně zřetelný, neboť u Internet Exploreru tak vodorovnou čáru tvoří pouze okraje obdélníku, přičemž alespoň jeden z nich je v kombinaci jak se světlým, tak s tmavým pozadím dobře viditelný. V případě Mozilly již obdélník vodorovné čáry není bezobsažný – jeho vnitřek přebírá barvu nadřazeného objektu, takže se v některých barevných kombinacích (především pak, je-li pozadí tmavé) čára ztrácí. Tento neduh lze snadno upravit definováním výšky čáry pomocí stylů parametrem height:

hr {height: 2px}

Problém barevného vyvedení

Pro Internet Explorer lze vodorovnou čáru obarvit velmi jednoduše, pomocí parametru color, pro modrý oddělovač tedy stačí v definici stylu zapsat:

hr {color: blue}

Na základě tohoto jediného parametru Internet Explorer vykreslí dva pixely tlustou modrou čáru, a to bez okrajů! Nikoli však již Mozilla. Ta značku hr striktně chápe jako obdélníkový objekt, a u takových objektů lze v HTML barevně upravovat pouze okraje (rodina parametrů border) a pozadí (parametry background). Z tohoto důvodu Mozilla parametr color prostě ignoruje a vodorovnou čáru zobrazí stejně, jako by její vzhled žádnými parametry upravován nebyl. Chceme-li tedy barevnou čáru i v Mozille, musíme obarvit pozadí nebo okraje. Tyto způsoby však skrývají jistá úskalí (ovšem na druhou stranu možná netušené možnosti).

Barvíme vnitřek

Prostým zápisem:

hr {background-color: blue}

nezbavíme vodorovnou čáru okrajů, které prohlížeče vykreslují. V Internet Exploreru tak žádnou modrou neuvidíme, protože se vykreslí pouze šedé okraje; v Mozille již ano, ale i zde jsou okraje patrné jako odstíny modré. Chceme-li se okrajů úplně zbavit, pak Mozille postačí úprava šířky okraje:

hr {background-color: blue;
    border-width: 0px}

Na Internet Explorer však úpravy šířky okraje neplatí, a to ani v kombinaci s úpravou stylu okrajů (parametr border-style). Přesněji řečeno, onen rámeček v Internet Exploreru vykreslený kolem vnitřku vodorovné čáry podle tohoto prohlížeče vůbec okraje nejsou, je to prostě specifikum, které já osobně pokládám za chybu. Znamená to mimo jiné, že pokud budeme chtít ve vodorovné čáře použít obrázek pomocí parametru background-image (vhodným obrázkem například docílíme, že vodorovná čára bude klikatá), Internet Explorer kolem něj vždy zobrazí okraje. V případě, že si vystačíme s barvou, můžeme si od okrajů vypomoci parametrem color:

hr {background-color: blue;
    border-width: 0px;
    height: 2px;
    color: blue}

Předchozí příklad tedy zajistí, že jak v Internet Exploreru, tak v Mozille bude vodorovná čára zobrazena jako modrá čára o výšce dva pixely. Nevýhodou tohoto řešení je nutnost zadávat hodnotu barvy dvakrát (lze tak sice docílit zobrazení různých barev v probíraných prohlížečích, otázkou zůstává, k čemu by to bylo dobré).

Barvíme okraje

Jednolité barevné čáry můžeme docílit také pomocí stylů okrajů, pokud vhodně potlačíme její vnitřek:

hr {border: solid 1px blue;
    height: 2px}

Je nanejvýš vhodné uvádět celkovou výšku vodorovné čáry jako dvojnásobek velikosti okrajů. V případě, že bude zadána menší, Mozilla čáru nezobrazí správně, bude-li větší, vyvstanou problémy s vnitřkem popsané výše, nebude-li vůbec uvedena, použijí prohlížeče své přednastavené hodnoty. Na místo hodnoty solid stylu okrajů je samozřejmě možné použít jinou povolenou hodnotu, tímto způsobem tedy lze snadno vytvořit čárkovanou (dashed) či tečkovanou (dotted) vodorovnou čáru:

hr {border: dashed 0.15ex pink;
    height: 0.3ex}

V porovnání s metodou barvení vodorovné čáry skrze její vnitřek není v případě dvojnásobných okrajů nutné zadávat barevnou hodnotu dvakrát – tomuto triku rozumí oba prohlížeče stejně. Jenom nezapomeňme, že čárkované a tečkované úsečky Internet Explorer zvládá až od verze 5.5.

Zarovnání čáry k okrajům

Nezřídka kdy není potřeba vykreslovat vodorovnou čáru přes celou šířku nadřazeného objektu. Velikost čáry pomocí stylů ovlivníme snadno parametrem width:

hr {width: 200px}

Pokud má být čára kratší než šířka nadřazeného objektu, bude na své pozici zarovnána na střed. I to však občas může být proti mysli návrháře stránek, který by chtěl zkrácenou čáru zarovnat nalevo či napravo. Parametru text-align však v tomto případě porozumí opět pouze Internet Explorer:

hr {width: 200px;
    text-align: left}

V Mozille se stejného výsledku dosáhne vhodným použitím parametrů upravující velikost okolí vodorovné čáry (rodina parametrů margin):

hr {width: 200px;
    margin-left: 0px}

Mozilla této definici totiž rozumí tak, že mezi vodorovnou čarou a levým okrajem nadřazeného objektu má být mezera velikosti nula pixelů, tj. žádná mezera; čáru tedy vykreslí zarovnanou doleva. Internet Explorer této definici ovšem rozumí tak, že prostor, ve kterém má být čára vykreslena, má být zleva odsazen (tj. zmenšen) o nula pixelů, ve výsledku to tudíž nepřinese žádnou viditelnou změnu. Stejného výsledku v obou prohlížečích tedy dosáhneme kombinací obou parametrů, přičemž lze snadno upravovat i odsazení od toho kraje, ke kterému chceme čáru zarovnat:

hr {width: 200px;
    text-align: right;
    margin-right: 2ex}

Viditelný rozdíl mezi prohlížeči může nastat v případě, že velikost čáry bude udána v procentech a zároveň bude nastaveno velké odsazení od okraje. Mozilla totiž nejdříve spočítá velikost čáry a pak ji umisťuje, kdežto Internet Explorer nejdříve spočítá šířku prostoru, kam bude čáru umísťovat, a teprve pak spočítá velikost čáry – a ta mu z užšího prostoru samozřejmě vyjde menší.

Nakonec se podívejte, jak takové vodorovné čáry mohou vypadat.

Všeho s mírou, vodorovných čar obzvlášť

Nyní, když víme, jak vodorovnou čáru spodobnit k obrazu svému, si připomeňme, že logický význam značky hr spočívá ve významném rozdělení textového proudu – a tedy proto, aby se někde na stránce objevila čára, není nutné hned sem tuto značku cpát. Budeme-li chtít například vykreslit čáru pod každým odstavcem textu, bude určitě elegantnější využít styl border-bottom u značky p, nežli do textu pod každý odstavec vepisovat text <hr />:

p {border-bottom: solid 2px blue}

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.