Свойство CSS text-orientation
Свойство CSS text-orientation задаёт ориентацию символов в строке. Узнайте значения свойства и попробуйте примеры.
Свойство CSS text-orientation управляет ориентацией отдельных символов в строке, когда текст выводится вертикально. Оно незаменимо при вёрстке восточноазиатских письменностей (китайской, японской, корейской) в традиционном вертикальном направлении, а также когда нужно создать вертикальную подпись или заголовок в дизайне с латинским шрифтом.
Само по себе text-orientation не даёт никакого эффекта — оно работает лишь тогда, когда направление строки задано как вертикальное. Это направление устанавливается свойством writing-mode (например, vertical-rl или vertical-lr). Можно думать об этой паре как о разделении обязанностей: writing-mode определяет в каком направлении течёт строка, а text-orientation — как повёрнут каждый глиф вдоль этой строки.
В этой главе рассматривается, что делает каждое значение, когда выбирать то или иное, особенности поддержки браузерами, а также редактируемые примеры.
Зачем использовать
- Вертикальная типографика CJK. По умолчанию (
mixed) латинские символы, встречающиеся в вертикальном китайском или японском тексте, поворачиваются на 90°, что выглядит неудобочитаемо. Значениеuprightсохраняет их в вертикальном положении. - Декоративные вертикальные заголовки и боковые подписи. Названия на корешке, теги в сайдбаре и подписи к осям диаграмм в латинских шрифтах часто лучше смотрятся в прямом или боковом положении.
- Точное отображение контента со смешанными письменностями — когда числа, аббревиатуры или заимствованные слова появляются внутри вертикального текста.
Значения — краткий обзор
text-orientation принимает пять значений, связанных с письменностями: mixed, upright, sideways, sideways-right и use-glyph-orientation, а также глобальные ключевые слова initial и inherit. Все значения, связанные с письменностями, применяются только в вертикальных режимах типографики.
Несколько исторических замечаний: старое значение sideways-left было удалено из спецификации, sideways-right теперь является лишь псевдонимом для sideways, а варианты использования без вертикального режима перенесены в значения sideways-lr / sideways-rl свойства writing-mode.
Свойство text-orientation имеет эффект только тогда, когда writing-mode задан как вертикальный (vertical-rl или vertical-lr). В обычном горизонтальном макете оно игнорируется.
| Начальное значение | mixed |
|---|---|
| Применяется к | Всем элементам, кроме групп строк, строк, групп столбцов и столбцов таблиц. |
| Наследуется | Да. |
| Анимируемо | Нет. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.textOrientation = "upright"; |
Синтаксис
Значения CSS text-orientation
text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;Пример свойства text-orientation со значением "mixed":
Пример кода CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-rl;
text-orientation: mixed;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>При значении mixed латинские буквы остаются в вертикальном положении, тогда как сама строка течёт сверху вниз и справа налево. Это поведение браузера по умолчанию для вертикальных режимов письма, и именно его следует использовать для настоящего текста на CJK-языках.
Результат
Пример свойства text-orientation со значением "upright":
Пример CSS text-orientation со значением upright
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
writing-mode: vertical-lr;
text-orientation: upright;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<p>Lorem ipsum is simply dummy text.</p>
</body>
</html>Значение upright заставляет каждый глиф стоять вертикально, вне зависимости от письменности. Это типичный выбор для декоративного вертикального заголовка в дизайне с латинским шрифтом, а также для того, чтобы латинские слова, встроенные в вертикальный CJK-текст, оставались читаемыми. Обратите внимание, что upright также принудительно устанавливает двунаправленное свойство direction в значение ltr.
Пример: вертикальный заголовок рядом с основным текстом
Ещё один пример кода CSS text-orientation
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #ffffff;
color: #000000;
font-size: 1.1em;
}
.example {
background: #cccccc;
color: #fff;
padding: 3em;
margin: 40px auto 0;
width: 400px;
max-width: 400px;
display: flex;
}
h1 {
color: #8ebf42;
margin: 0.15em 0.75em 0 0;
font-family: 'Bungee Shade', cursive;
-webkit-writing-mode: vertical-lr;
-ms-writing-mode: tb-lr;
writing-mode: vertical-lr;
text-orientation: upright;
-webkit-font-feature-settings: "vkrn", "vpal";
font-feature-settings: "vkrn", "vpal";
}
p {
margin: 0;
line-height: 1.5;
font-size: 1.15em;
}
</style>
</head>
<body>
<h2>Text-orientation property example</h2>
<div class="example">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>
</body>
</html>Поддержка браузерами и запасные варианты
text-orientation поддерживается всеми современными браузерами (Chrome, Edge, Firefox, Safari). Два практических замечания:
- Свойство имеет смысл только вместе с вертикальным
writing-mode, поэтому всегда задавайте оба вместе. - В старых сборках WebKit для
writing-modeтребуется префикс-webkit-(это видно в примере выше). Само свойствоtext-orientationв текущих браузерах префикса не требует. - Не используйте
use-glyph-orientation: оно устарело и больше не поддерживается в современных браузерах.
Значения
| Значение | Описание |
|---|---|
| mixed | Символы горизонтальных письменностей располагаются вертикально, а символы вертикальных письменностей поворачиваются на 90° по часовой стрелке. Это значение по умолчанию. |
| upright | Все символы располагаются вертикально, вне зависимости от письменности. Не влияет на свойство direction. |
| sideways | Символы располагаются так же, как в горизонтальном режиме, но вся строка поворачивается на 90° по часовой стрелке. |
| sideways-right | Псевдоним для sideways, сохранённый для совместимости. |
| use-glyph-orientation | Устарело. Ранее соответствовало устаревшим SVG-свойствам glyph-orientation-vertical и glyph-orientation-horizontal. В современных браузерах не поддерживается. |
| initial | Устанавливает для свойства значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Связанные свойства
writing-mode— задаёт направление строки (горизонтальное или вертикальное) и необходимо для работыtext-orientation.text-combine-upright— размещает короткий фрагмент символов (например, двузначный год) в пространстве одного вертикального символа в вертикальном тексте.direction— управляет базовым двунаправленным направлением текста.text-align— выравнивает строчное содержимое вдоль строки; в вертикальных режимах это становится выравниванием по верхнему/нижнему краю.