режим-записи

Это свойство определяет направление потока блоков, которое является направлением, в котором укладываются контейнеры блочного уровня, и направление, в котором содержимое на уровне строки течёт внутри контейнера блока. Таким образом, оно также определяет порядок содержимого блочного уровня.

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

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

Свойство writing-mode задаётся одним из перечисленных ниже значений. Направление потока в горизонтальных скриптах также зависит от направленности этого скрипта, либо слева направо (ltr, как в английском и большинстве других языков), либо справа налево (rtl, как в иврите или арабском).

horizontal-tb

Для ltr скриптов содержимое течёт горизонтально слева направо. Для rtl скриптов содержимое течёт горизонтально справа налево. Следующая горизонтальная строка размещается ниже предыдущей.

vertical-rl

Для ltr скриптов содержимое течёт вертикально сверху вниз, а следующая вертикальная строка размещается слева от предыдущей. Для rtl скриптов содержимое течёт вертикально снизу вверх, а следующая вертикальная строка размещается справа от предыдущей.

vertical-lr

Для ltr скриптов содержимое течёт вертикально сверху вниз, а следующая вертикальная строка размещается справа от предыдущей. Для rtl скриптов содержимое течёт вертикально снизу вверх, а следующая вертикальная строка размещается слева от предыдущей.

sideways-rl

Для ltr скриптов содержимое течёт вертикально сверху вниз. Для rtl скриптов содержимое течёт вертикально снизу вверх. Все глифы, даже те, что в вертикальных скриптах, устанавливаются боком вправо.

sideways-lr

Для ltr скриптов содержимое течёт вертикально снизу вверх. Для rtl скриптов содержимое течёт вертикально сверху вниз. Все глифы, даже те, что в вертикальных скриптах, устанавливаются боком влево.

lr

Устарело, за исключением документов SVG1. Для CSS используйте horizontal-tb вместо.

lr-tb

Устарело, за исключением документов SVG1. Для CSS используйте horizontal-tb вместо.

rl

Устарело, за исключением документов SVG1. Для CSS используйте horizontal-tb вместо.

tb

Устарело, за исключением документов SVG1. Для CSS используйте vertical-lr вместо.

tb-lr

Устарело, за исключением документов SVG1. Для CSS используйте vertical-lr вместо.

tb-rl

Устарело, за исключением документов SVG1. Для CSS используйте vertical-rl вместо.

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

Этот пример демонстрирует все режимы записи, показывая каждый из них с текстом на различных языках.

HTML

HTML представляет собой <table> с каждым режимом записи в строке со столбцом, показывающим текст на различных скриптах, использующих этот режим записи.

<table>
  <caption>
    Using multiple writing modes
  </caption>
  <tr>
    <th>Value</th>
    <th>Vertical script</th>
    <th>Horizontal (LTR) script</th>
    <th>Horizontal (RTL) script</th>
    <th>Mixed script</th>
  </tr>
  <tr class="text1">
    <th>horizontal-tb</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text2">
    <th>vertical-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="text3">
    <th>vertical-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text4">
    <th>sideways-lr</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
  <tr class="experimental text5">
    <th>sideways-rl</th>
    <td>我家没有电脑。</td>
    <td>Example text</td>
    <td>מלל ארוך לדוגמא</td>
    <td>1994年に至っては</td>
  </tr>
</table>
<p class="notice">
  Your browser does not support the <code>sideways-lr</code> or
  <code>sideways-rl</code> values.
</p>

CSS

CSS, который настраивает направленность содержимого, выглядит следующим образом:

.text1 td {
  writing-mode: horizontal-tb;
}

.text2 td {
  writing-mode: vertical-lr;
}

.text3 td {
  writing-mode: vertical-rl;
}

.text4 td {
  writing-mode: sideways-lr;
}

.text5 td {
  writing-mode: sideways-rl;
}

Результат

Если ваш браузер не поддерживает sideways-lr, обходной путь заключается в использовании transform для достижения аналогичного эффекта в зависимости от направления скрипта. Эффект vertical-rl такой же, как и у sideways-lr, поэтому для скриптов слева направо преобразование не требуется. В некоторых случаях вращение текста на 180 градусов достаточно для достижения эффекта sideways-lr, но глифы шрифта могут быть не спроектированы для вращения, поэтому это может привести к неожиданному позиционированию или отрисовке.

HTML

<table>
  <caption>
    Using writing-mode with transforms
  </caption>
  <thead>
    <tr>
      <th>Vertical LR</th>
      <th>Vertical LR with transform</th>
      <th>Sideways LR</th>
      <th>Only rotate</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="vertical-lr">我家没有电脑。</span>
        <span class="vertical-lr">Example text</span>
      </td>
      <td>
        <span class="vertical-lr rotated">我家没有电脑。</span>
        <span class="vertical-lr rotated">Example text</span>
      </td>
      <td>
        <span class="sideways-lr">我家没有电脑。</span>
        <span class="sideways-lr">Example text</span>
      </td>
      <td>
        <span class="only-rotate">我家没有电脑。</span>
        <span class="only-rotate">Example text</span>
      </td>
    </tr>
  </tbody>
</table>

CSS

.vertical-lr {
  writing-mode: vertical-lr;
}

.rotated {
  transform: rotate(180deg);
}

.sideways-lr {
  writing-mode: sideways-lr;
}

.only-rotate {
  inline-size: fit-content;
  transform: rotate(-90deg);
}

Результат

• Атрибут SVG writing-mode
• direction
• unicode-bidi
• text-orientation
• text-combine-upright
• Логические свойства CSS
• Стиль вертикального текста (китайский, японский, корейский и монгольский) на W3.org (2022)
• Модуль CSS writing modes
• Создание вертикальных элементов управления форм