Свойство CSS `text-orientation`

Свойство text-orientation CSS задаёт ориентацию символов текста в строке. Оно влияет только на текст в вертикальном режиме (когда writing-mode не равно horizontal-tb). Это свойство полезно для управления отображением языков с вертикальным письмом, а также для создания вертикальных заголовков таблиц.

Попробуйте

writing-mode: vertical-rl;
text-orientation: mixed;

writing-mode: vertical-rl;
text-orientation: upright;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <p>
      In another moment down went Alice after it, never once considering how in
      the world she was to get out again.
    </p>
  </div>
</section>

Синтаксис

/* Keyword values */
text-orientation: mixed;
text-orientation: upright;
text-orientation: sideways-right;
text-orientation: sideways;
text-orientation: use-glyph-orientation;

/* Global values */
text-orientation: inherit;
text-orientation: initial;
text-orientation: revert;
text-orientation: revert-layer;
text-orientation: unset;

Значения

Свойству можно задать одно из следующих ключевых слов:

mixed

Поворачивает символы горизонтальных письменностей на 90° по часовой стрелке. Символы вертикальных письменностей располагаются естественным образом. Значение по умолчанию.

upright

Располагает символы горизонтальных письменностей естественным образом (вертикально), как и глифы вертикальных письменностей. Обратите внимание: это ключевое слово заставляет считать все символы написанными слева направо: используемое значение direction принудительно устанавливается в ltr.

sideways

Располагает символы так, как если бы они были горизонтальными, но поворачивает всю строку на 90° по часовой стрелке.

sideways-right

Псевдоним для sideways, сохранённый для обеспечения совместимости.

use-glyph-orientation

Для элементов SVG это ключевое слово приводит к использованию значений устаревших свойств SVG glyph-orientation-vertical и glyph-orientation-horizontal.

Формальное определение

Формальный синтаксис

text-orientation = 
  mixed |
  upright |
  sideways

Примеры

HTML

<p>Lorem ipsum dolet semper quisquam.</p>

CSS

p {
  writing-mode: vertical-rl;
  text-orientation: upright;
}

Результат

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

Совместимость с браузерами

См. также

• Другие свойства CSS, связанные с вертикальным письмом: writing-mode, text-combine-upright и unicode-bidi.
• Логические свойства CSS
• Стилизация вертикального текста (китайский, японский, корейский и монгольский языки)
• Результаты обширного тестирования поддержки в браузерах: https://w3c.github.io/i18n-tests/results/horizontal-in-vertical.html#text_orientation