Свойство CSS writing-mode
Свойство CSS writing-mode определяет направление текста и порядок следования блоков. Узнайте о значениях и попробуйте примеры.
Свойство CSS writing-mode задаёт, располагаются ли строки текста горизонтально или вертикально, а также направление, в котором следуют блоки и строки.
На этой странице объясняется, что делает свойство, какие значения оно принимает, когда его стоит применять и как оно взаимодействует со связанными свойствами — text-orientation и direction.
Что контролирует writing-mode
writing-mode изменяет направление блочного потока — направление, в котором следуют блочные блоки (абзацы, заголовки и т.д.) — и базовое строчное направление, в котором символы располагаются внутри строки. На обычной англоязычной странице блоки идут сверху вниз, а текст в строке — слева направо (horizontal-tb). При переключении на вертикальное значение вся эта модель поворачивается: строки идут сверху вниз, а сами строки следуют либо справа налево, либо слева направо.
Поскольку writing-mode переопределяет понятия «начало», «конец», «блок» и «строчный», оно тесно связано с логическими свойствами CSS (margin-block, padding-inline, inset-block и т.д.), которые автоматически следуют активному режиму письма, а не привязаны к физическим сторонам.
Когда его использовать?
- Вертикальные восточноазиатские письменности (традиционный китайский, японский, корейский), которые пишутся сверху вниз, столбцами справа налево — используйте
vertical-rl. - Повёрнутые метки интерфейса, например боковой заголовок столбца в таблице или вертикальная подпись оси на графике.
- Редакционные или «журнальные» макеты, в которых заголовок или выносной блок намеренно повёрнут на бок.
При использовании вертикальных режимов writing-mode почти всегда сочетают с text-orientation, чтобы указать, остаются ли отдельные латинские символы прямыми или поворачиваются на 90°.
Современные браузеры полностью поддерживают свойство writing-mode без вендорных префиксов.
| Начальное значение | horizontal-tb |
|---|---|
| Применяется к | Всем элементам, кроме групп строк таблицы, групп столбцов таблицы, строк таблицы, столбцов таблицы, контейнеров основы руби и контейнеров аннотаций руби. |
| Наследуется | Да. |
| Анимируется | Нет. |
| Версия | CSS3 |
| DOM-синтаксис | object.style.writingMode = "vertical-lr"; |
Синтаксис
Значения CSS writing-mode
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;По умолчанию используется horizontal-tb. Свойство наследуется, поэтому его установка на контейнере распространяется на все дочерние элементы, если они сами не переопределяют его.
Пример свойства writing-mode со значением horizontal-tb:
Пример кода CSS writing-mode
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: horizontal-tb;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Результат
Другой пример, в котором контент располагается вертикально сверху вниз и справа налево.
Пример свойства writing-mode со значением vertical-rl:
Пример CSS writing-mode vertical-rl
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-rl;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>В следующем примере контент располагается вертикально сверху вниз и слева направо.
Пример свойства writing-mode со значением vertical-lr:
Пример CSS writing-mode vertical-lr
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
p {
font-size: 20px;
writing-mode: vertical-lr;
}
p::first-letter {
color: #1c87c9;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Writing-mode property example</h2>
<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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>Сочетание с text-orientation
Внутри вертикального режима письма text-orientation определяет, как поворачивается каждый глиф. Наиболее распространённое сочетание сохраняет CJK-символы прямыми при вертикальном направлении строки:
.vertical {
writing-mode: vertical-rl;
text-orientation: upright; /* keep characters upright instead of rotated 90° */
}Без text-orientation: upright латинские буквы и цифры по умолчанию поворачиваются на 90° по часовой стрелке в вертикальном режиме.
Значения
horizontal-tb — единственное горизонтальное значение. Остальные значения являются вертикальными и различаются направлением следования строк и ориентацией глифов.
| Значение | Описание |
|---|---|
| horizontal-tb | По умолчанию. Контент располагается горизонтально слева направо, строки следуют сверху вниз. |
| vertical-rl | Контент располагается вертикально сверху вниз, строки следуют справа налево. |
| vertical-lr | Контент располагается вертикально сверху вниз и горизонтально слева направо. |
| sideways-rl | Устарело в CSS Writing Modes Level 3. Контент располагается вертикально сверху вниз, все глифы повёрнуты боком вправо. |
| sideways-lr | Устарело в CSS Writing Modes Level 3. Контент располагается вертикально сверху вниз, все глифы повёрнуты боком влево. |
| initial | Устанавливает значение свойства по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Связанные свойства
text-orientation— управляет поворотом отдельных глифов внутри вертикального режима письма.direction— задаёт базовое строчное направление (LTR или RTL) для текста.text-align— выравнивает строчное содержимое; ключевые словаstart/endучитывают режим письма.transform— альтернативный способ визуального поворота элементов без изменения модели компоновки.