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í.
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.
Pouze Internet Explorer od verze 5.5.
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 |
Jak psát web píše Yuhů, Dušan Janovský. Kontakt.