Свойство CSS `writing-mode`

Свойство writing-mode CSS определяет, располагаются ли строки текста горизонтально или вертикально, а также направление потока текста.

Попробуйте

writing-mode: horizontal-tb;

writing-mode: vertical-lr;

writing-mode: vertical-rl;

writing-mode: sideways-rl;

writing-mode: sideways-lr;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  width: 80%;
  max-height: 300px;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  margin: 10px;
}

Синтаксис

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

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

Значения

Это свойство задаётся одним из следующих ключевых слов:

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 определяет, располагаются ли строки текста горизонтально или вертикально. Оно задаёт направление потока блоков — направление, в котором располагаются блочные контейнеры, а также направление потока строчного содержимого внутри блочного контейнера. Таким образом, оно также определяет порядок блочного содержимого.

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

Если свойство задаётся для всего документа, его следует задавать для корневого элемента (элемента html в HTML-документах).

Формальное определение

Формальный синтаксис

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

Примеры

Использование нескольких режимов письма

В этом примере демонстрируются все режимы письма: каждый из них показан на тексте на разных языках.

HTML

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

<table>
  <caption>
    Using multiple writing modes
  </caption>
  <thead>
    <tr>
      <th>Value</th>
      <th>Vertical script</th>
      <th>Horizontal (LTR) script</th>
      <th>Horizontal (RTL) script</th>
      <th>Mixed script</th>
    </tr>
  </thead>
  <tbody>
    <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>
  </tbody>
</table>
<p class="notice">
  Your browser does not support the <code>sideways-lr</code> or
  <code>sideways-rl</code> values.
</p>

CSS

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}

.experimental {
  display: none;
}

.notice {
  display: table-row;
  font-weight: bold;
  text-align: center;
}

@supports (writing-mode: sideways-lr) {
  .experimental {
    display: table-row;
  }
  .notice {
    display: none;
  }
}

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;
}

Результат

Использование writing-mode с преобразованиями

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

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);
}

table {
  border-collapse: collapse;
}
td,
th {
  border: 2px black solid;
  padding: 4px;
}
th {
  background-color: lightgray;
}
span {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}

Результат

Спецификации

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

См. также

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