writing-mode

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Summary

Свойство writing-mode устанавливает горизонтальное или вертикальное положение текста также как и направление блока.

Свойство определяет направление потока блока, в каком направлении складываются контейнеры уровня блока и направление в котором инлайновый контент находится в родительском блоке. Также свойство writing-mode определяет порядок контента блочного уровня.

Начальное значениеhorizontal-tb
Применяется квсе элементы, кроме групп табличных строк, групп табличных столбцов, табличных строк и табличных колонок
Наследуетсяда
Обработка значениякак указано
Animation typeNot animatable

Синтаксис

css
/* Keyword values */
writing-mode: horizontal-tb;
writing-mode: horizontal-bt;
writing-mode: vertical-rl;
writing-mode: vertical-lr;

/* Global values */
writing-mode: inherit;
writing-mode: initial;
writing-mode: unset;

Значения

horizontal-tb

Content flows horizontally from left to right, vertically from top to bottom. The next horizontal line is positioned below the previous line.

horizontal-bt

Content flows horizontally from left to right, vertically from bottom to top. The next horizontal line is positioned above the previous line.

vertical-rl

Content flows vertically from top to bottom, horizontally from right to left. The next vertical line is positioned to the left of the previous line.

vertical-lr

Content flows vertically from top to bottom, horizontally from left to right. The next vertical line is positioned to the right of the previous line.

lr

Deprecated except for SVG1 documents. For CSS, use horizontal-tb.

lr-tb

Deprecated except for SVG1 documents. For CSS, use horizontal-tb.

rl

Deprecated except for SVG1 documents. For CSS, use horizontal-tb.

tb

Deprecated except for SVG1 documents. For CSS, use vertical-rl.

tb-rl

Deprecated except for SVG1 documents. For CSS, use vertical-rl.

Formal syntax

writing-mode = 
  horizontal-tb  |
  vertical-rl    |
  vertical-lr    |
  sideways-rl    |
  sideways-lr

Пример

html
<p class="exampleText">Example text</p>
css
.exampleText {
  writing-mode: vertical-rl;
}

Specification

Specification
CSS Writing Modes Level 4
# block-flow

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

BCD tables only load in the browser

Смотрите также