writing-modeVlastnost změní zarovnání textu, takže lze číst shora dolů nebo zleva doprava, v závislosti na jazyku. Řekněme například, že chceme přidat nějaký text, který se čte shora dolů a zprava doleva, například takto:
.vertical-rl ( writing-mode: vertical-rl; )Podívejte se na režim psaní perem: vertical-rl od CSS-Tricks (@ css-tricks) na CodePen.
To je nejužitečnější v jazycích, jako je čínština, japonština nebo korejština, kde je text často nastaven svisle. V anglickém jazyce je pravděpodobnější, že budete chtít tuto vlastnost použít z estetických důvodů, jako je například zarovnání záhlaví v bloku textu, jako je tento:
Podívejte se na Pen YWBWGA od CSS-Tricks (@ css-tricks) na CodePen.
Hodnoty
V níže uvedených příkladech jsem udělal první písmeno textu červeně, aby bylo snazší zjistit, kterým směrem je třeba začít číst.
vodorovně-tb
Toto je výchozí hodnota vlastnosti: text se čte zleva doprava a shora dolů.
Podívejte se na režim psaní perem: horizontal-tb od CSS-Tricks (@ css-tricks) na CodePen.
vertikální-rl
Text se čte zprava doleva a shora dolů:
Podívejte se na režim psaní perem: vertical-rl od CSS-Tricks (@ css-tricks) na CodePen.
vertikální-lr
Text se čte zleva doprava a shora dolů:
Podívejte se na režim psaní perem: vertical-rl od CSS-Tricks (@ css-tricks) na CodePen.
Související odkazy
- Vertikální text s režimy psaní CSS3
- Ahmad Shadeed v režimu psaní
Podpora prohlížeče
Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.
plocha počítače
| Chrome | Firefox | TJ | Okraj | Safari |
|---|---|---|---|---|
| 8 * | 41 | 11 | 12 | 5,1 * |
Mobilní / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 3 * | 5,0-5,1 * |