Writing-mode

CSS vlastnost writing-mode umožňuje vertikální zápis textu. Naneštěstí si Internet Explorer tuto vlastnost zavedl s hodnotou tb-rl, kterou ostatní prohlížeče musely převzít, ačkoli je nestandardní.

writing-mode
hodnoty směr textu pro prohlížeče
lr-tb normální text zleva doprava Jen Explorer, nestandardní hodnota
tb-rl text shora dolů, otočený o 90% Jen Explorer, nestandardní hodnota
horizontal-tb normální text zleva doprava všechny prohlížeče kromě Internet Exploreru
vertical-rl otočený o 90° doprava, řádky jdou zprava doleva
vertical-lr otočený o 90° doprava, řádky jdou zleva doprava, takže jsou přeházené
sideways-rl v evropských textech nic nedělá
sideways-lr

Hodnota horizontal-tb je výchozí a nemusí se zadávat.

Abyste vertikální text vertical-rl přečetli, musíte otočit hlavu k pravému rameni. Tak se třeba píšou tituly na hřbet anglických knih.

Domnívám se, že tento psací mód vznikl kvůli nějakému orientálnímu jazyku. V evropské praxi se hodí snad jen do záhlaví sloupců tabulek.

Otočit text tak, aby byl zdola nahoru a dal se číst otočením hlavy k levému rameni, se jednoduše nedá. Nic jako bt-lr neexistuje. Řešení je otočit text vertikálně a pak na něj aplikovat rotaci:

th span {writing-mode: vertical-rl; transform: rotate(180deg);}

Stojí také za povšimnutí, že neotáčím samotnou buňku tabulky, ale její podprvek, konkrétně v tomto případě prvek <span>. Otáčet s celou buňkou tabulky se mi totiž nedaří (což docela dává logiku).

Hodnota writing-mode: tb-rl funguje jenom pro Explorer. Znamená top-bottom-right-left, čili shora dolů, zprava doleva.

Podpora

Pouze Internet Explorer od verze 5.5.

Podpora vlastnosti writing-mode
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze pouze nestandardní hodnota tb-rl
Firefox ne  
Chrome ne neumí obracet buňky tabulky, nutno otáčet vnořený prvek

Příklady

CSS vlastnost writing-mode

 

Reklama

www.webhosting-c4.cz, extra rychlý SSD webhosting s doménou v ceně
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.