Свойство CSS writing-mode
Свойство CSS writing-mode определяет, должен ли текст располагаться вертикально или горизонтально.
Это свойство изменяет направление потока текста, позволяя контенту читаться горизонтально (слева направо или справа налево) или вертикально (сверху вниз) в зависимости от значения. Например, оно часто используется для поддержки традиционных вертикальных восточноазиатских письменностей или современных горизонтальных макетов. Примечание: при использовании вертикальных значений обычно требуется свойство text-orientation для управления поворотом отдельных символов.
Свойство writing-mode влияет на направление блочного потока, которое определяет, как располагаются блочные контейнеры, и в каком направлении движется контент уровня строк внутри блочного контейнера.
INFO
Современные браузеры полностью поддерживают свойство writing-mode без вендорных префиксов.
| Начальное значение | horizontal-tb |
|---|---|
| Применяется к | Всем элементам, кроме групп строк таблицы, групп столбцов таблицы, строк таблицы, столбцов таблицы, контейнеров базы руби, контейнеров аннотаций руби. |
| Наследуется | Да. |
| Анимация | Нет. |
| Версия | CSS3 |
| Синтаксис DOM | object.style.writingMode = "vertical-lr"; |
Синтаксис
Значения CSS writing-mode
writing-mode: horizontal-tb | vertical-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr;Пример свойства 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>Значения
| Значение | Описание |
|---|---|
| horizontal-tb | Контент течёт горизонтально слева направо и вертикально сверху вниз. |
| vertical-tb | Современный псевдоним для horizontal-tb. Контент течёт горизонтально слева направо и вертикально сверху вниз. |
| vertical-rl | Контент течёт вертикально сверху вниз и горизонтально справа налево. |
| vertical-lr | Контент течёт вертикально сверху вниз и горизонтально слева направо. |
| sideways-rl | Устарело в CSS Writing Modes Level 3. Контент течёт вертикально сверху вниз, а все глифы расположены горизонтально вправо. |
| sideways-lr | Устарело в CSS Writing Modes Level 3. Контент течёт вертикально сверху вниз, а все глифы расположены горизонтально влево. |
| initial | Заставляет свойство использовать значение по умолчанию. |
| inherit | Наследует свойство от родительского элемента. |
Практика
writing-mode:vertical-rl означает, что контент течёт