Ориентация текста - 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
Применимо к: всем элементам, кроме групп строк таблицы, строк, групп столбцов и столбцов.
Унаследовано: да
Проценты: н / д
Вычисленное значение: указанное значение
Тип анимации: без анимации

Значения

/* 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, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.

Рабочий стол

Хром	Fire Fox	IE	Край	Сафари
48	41 год	Нет	79	10,1 *

Мобильный / планшет

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

Технические характеристики

CSS Writing Modes Level 3 (черновик редакции)

Дополнительная информация

Почему вертикальная ориентация текста - кошмар для кроссбраузерной совместимости? от Nikhil - Подробное объяснение text-orientationи writing-mode.
Легко создавайте боковой текст, используя свойство CSS «writing-mode» Ади Пурдила - изучите различные подходы в дополнение к использованию text-orientation.
2 способа создания вертикального текста в CSS от WS Toh - более прямое сравнение подходов с использованием writing-modeи text-orientation.
Поворот текста Криса Койера - подход к вертикальному тексту с использованием transformвместо writing-modeили text-orientation.