Ориентация на текст - CSS-трикове

В text-orientationимота в CSS-голяма степен отговаря на текст в една линия, когато се работи с вертикално writing-mode. По принцип той завърта или линията на 90 ° по посока на часовниковата стрелка, за да помогне да се контролира начина, по който се показват вертикалните езици - подобно на начина, по който text-combine-uprightвърти групи от символи в ред от текст във вертикален скрипт, но за пълни редове текст.

.element ( text-orientation: mixed; writing-mode: vertical-rl; )

За работа с двупосочен текст - блок, който съдържа текст отляво надясно и отдясно наляво, например - проверете unicode-bidiсвойството. Той се комбинира със directionсвойството, за да замени начина, по който браузърът решава да покаже текста.

Синтаксис

text-orientation: mixed | upright | sideways

Първоначално: mixed
Прилага се за: всички елементи с изключение на групи редове на таблица, редове, групи колони и колони
Наследен: да
Проценти: n / a
Изчислена стойност: определена стойност
Тип анимация: не е анимационен

Стойности

/* Keyword values */ text-orientation: mixed; /* default */ text-orientation: upright; text-orientation: sideways; text-orientation: sideways-right; /* Global values */ text-orientation: inherit; text-orientation: initial; /* mixed */ text-orientation: unset;

mixed: Стойност по подразбиране. Символите в хоризонтален текст се завъртат на 90 ° по посока на часовниковата стрелка. Символите във вертикален скрипт се показват в естествената им вертикална ориентация.
upright: Символите в хоризонтален сценарий са зададени в естественото им хоризонтално изправено положение, включително някои глифове. Така че, когато вертикалният режим на писане може да завърти ред текст, така че символите да са настрани, тази стойност ще завърти самите символи на 90 ° до тяхното естествено положение. Имайте предвид, че тази стойност принуждава directionсвойството да се използва като стойност ltr, което означава, че всички символи се третират така, сякаш са в режим на писане отляво надясно.
sideways: Целият текст във вертикален режим на писане се показва странично, сякаш е в хоризонтално оформление, но целият ред се завърта на 90 ° по посока на часовниковата стрелка.
sideways-right: Някои браузъри уважават тази стойност като псевдоним на sidewaysстойността, запазена за обратна съвместимост.

use-glyph-orientationбе премахната като стойност на ключова дума през декември 2015 г. Използвана е за SVG елементи за дефиниране на SVG свойства glyph-orientation-verticalи glyph-orientation-horizontalкоито сега са оттеглени. glyph-orientation-verticalсега е псевдоним за text-orientation.

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

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

работен плот

Chrome	Firefox	IE	Ръб, край	Сафари
48	41	Не	79	10,1 *

Мобилен / таблет

Android Chrome	Android Firefox	Android	iOS Safari
88	85	81	10,0-10,2

Спецификация

CSS режими на писане ниво 3 (чернови на редактора)

Повече информация

Защо вертикалната ориентация на текста е кошмар за съвместимостта на различни браузъри? от Nikhil - Изчерпателно обяснение на text-orientationи writing-mode.
Лесно създавайте страничен текст, използвайки CSS свойството в режим на писане от Adi Purdila - Разгледайте различни подходи в допълнение към използването text-orientation.
2 начина за създаване на вертикален текст в CSS от WS Toh - По-пряко сравнение между подходите, използващи writing-modeи text-orientation.
Завъртане на текст от Крис Койер - Подход към вертикалния текст, използващ transformвместо writing-modeили text-orientation.