Режим на писане - CSS-трикове

В writing-modeимота променя подравняването на текста, така че да може да се чете от горе до долу и от ляво на дясно, в зависимост от езика. Да приемем например, че искаме да добавим текст, който се чете отгоре надолу и отдясно наляво, по следния начин:

.vertical-rl ( writing-mode: vertical-rl; )

Вижте режима за писане на писалка: vertical-rl от CSS-трикове (@ css-трикове) на CodePen.

Това е най-полезно на езици като китайски, японски или корейски, където текстът често е зададен вертикално. На английски език е по-вероятно да искате да използвате това свойство от естетически съображения, като например подравняване на заглавие в блок от текст като този:

Вижте писалката YWBWGA от CSS-Tricks (@ css-tricks) на CodePen.

Стойности

В примерите по-долу направих първата буква от текста червена, за да е по-лесно да разберете в коя посока трябва да започнете да четете.

хоризонтално-tb

Това е стойността по подразбиране на свойството: текстът се чете отляво надясно и отгоре надолу.

Вижте режима за писане на писалка: horizontal-tb от CSS-Tricks (@ css-tricks) на CodePen.

вертикално-rl

Текстът се чете отдясно наляво и отгоре надолу:

Вижте режима за писане на писалка: vertical-rl от CSS-трикове (@ css-трикове) на CodePen.

вертикален-lr

Текстът се чете отляво надясно и отгоре надолу:

Вижте режима за писане на писалка: vertical-rl от CSS-трикове (@ css-трикове) на CodePen.

Свързани връзки

Вертикален текст с CSS3 режими на писане
Ахмад Шейд в режим на писане

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.