Справочник HTML & CSS

writing-mode

Задаёт направление строк: горизонтальное (обычное) или вертикальное, как в японском тексте или на корешке книги.

Синтаксис

writing-mode: horizontal-tb | vertical-rl | vertical-lr;

Значения

Параметр	Тип	Описание
horizontal-tb	keyword	По умолчанию: горизонтальные строки сверху вниз.
vertical-rl	keyword	Вертикальные строки, следующая строка левее.
vertical-lr	keyword	Вертикальные строки, следующая строка правее.

Примеры

Вертикальная метка сбоку карточки:

<style>
  .card { display: flex; border: 1px solid #ccc; width: 260px; }
  .side {
    writing-mode: vertical-rl;
    rotate: 180deg;
    background: teal; color: white; padding: 8px 4px; text-align: center;
  }
  .body { padding: 8px; }
</style>
 
<div class="card">
  <div class="side">NEW</div>
  <div class="body">A card with a vertical label. The label reads from bottom to top.</div>
</div>

Примечания

Смена режима письма меняет местами блочную и строчную оси, поэтому логические свойства (margin-inline, inline-size, padding-block) следуют за текстом, а width и left — нет. text-orientation: upright ставит латинские буквы прямо в вертикальном тексте. Для простых повёрнутых подписей writing-mode лучше, чем transform: rotate(): элемент занимает правильное место.

См. также

margin-inline — Логические свойства: размеры и отступы по направлению текста вместо «слева», «справа», «сверху», «снизу».
dir — Направление письма: слева направо или справа налево.
transform — Сдвигает, поворачивает, масштабирует или наклоняет элемент, не влияя на раскладку вокруг.

В учебнике

Логические свойства — Свойства, которые зависят от направления текста, а не от сторон экрана — margin-inline, padding-block, inline-size, inset-inline и writing-mode.

Спасибо, что читаете!