text-orientation

Базовая линия Широко доступная

Эта функция хорошо устоялась и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с сентября 2020 года.

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

Попробуйте

Синтаксис

/* 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;

Свойство text-orientation задаётся одним ключевым словом из следующего списка.

Значения

mixed: Поворачивает символы горизонтальных скриптов на 90° по часовой стрелке. Выводит символы вертикальных скриптов естественным образом. Значение по умолчанию.
upright: Выводит символы горизонтальных скриптов естественным образом (вертикально), а также глифы для вертикальных скриптов. Обратите внимание, что это ключевое слово приводит к тому, что все символы рассматриваются слева направо: используемое значение direction принудительно устанавливается в ltr.
sideways: Приводит к выводу символов так, как они выводились бы горизонтально, но с поворотом всей строки на 90° по часовой стрелке.
sideways-right: Псевдоним для sideways, который сохраняется для совместимости.
use-glyph-orientation: Для элементов SVG это ключевое слово приводит к использованию значения устаревших свойств SVG glyph-orientation-vertical и glyph-orientation-horizontal.

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

Начальное значение	`mixed`
Применимо к	все элементы, кроме групп строк таблицы, строк, групп столбцов и столбцов
Наследуется	да
Вычисленное значение	как указано
Тип анимации	Не анимируемое

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

text-orientation = 
  mixed     |
  upright   |
  sideways

Примеры

HTML

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

CSS

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

Результат

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

Спецификация
CSS Writing Modes Level 4 # text-orientation

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`text-orientation`	4811	7979	41	3515	145.1	4818	41	3514	145	5.01.0	484.4
`mixed`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83
`sideways`	25≤83	7983	44≤72	1569	7	2583	4479	1459	7	1.513.0	4.483
`upright`	≤83	83	≤72	69	≤13.1	83	79	59	≤13.4	13.0	83

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation