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

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

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

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

Для максимальной совместимости браузера могут быть использованы такие расширения, как -webkit- для Safari, Google Chrome и Opera (новые версии).
Значение по умолчанию horizontal-tb
Применяется Ко всем элементам, кроме групп строк таблицы, групп колонок таблицы, строк таблицы, колонок таблицы и контейнеров ruby base, ruby annotation.
Наследуется Да.
Анимируемое Нет.
Версия CSS3
DOM синтаксис object.style.writingMode = "vertical-lr";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      font-size: 20px;
      -webkit-writing-mode: horizontal-tb;
      -ms-writing-mode: horizontal-tb;
      writing-mode: horizontal-tb;
      }
      p::first-letter {
      color: #1c87c9;
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства writing-mode</h2>
    <p>
       Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </p>
    </div>
  </body>
</html>

Рассмотрим другой пример с вертикальным контентом сверху вниз и справа налево:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      font-size: 20px;
      -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: vertical-rl;
      writing-mode: vertical-rl;
      }
      p::first-letter {
      color: #1c87c9;
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства writing-mode</h2>
    <p>
       Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </p>
    </div>
  </body>
</html>

Пример с вертикальным контентом сверху вниз и слева направо:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      font-size: 20px;
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: vertical-lr;
      writing-mode: vertical-lr;
      }
      p::first-letter {
      color: #1c87c9;
      font-weight: bold;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства writing-mode</h2>
    <p>
     Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
    </p>
    </div>
  </body>
</html>

Значения

Значение Описание
horizontal-tb Контент располагается горизонтально слева направо и вертикально сверху вниз.
vertical-rl Контент располагается вертикально сверху вниз и горизонтально справа налево.
vertical-lr Контент располагается вертикально сверху вниз и горизонтально слева направо.
sideway-rl Контент располагается вертикально сверху вниз, и все глифы расположены с правой стороны.
sideway-lr Контент располагается вертикально сверху вниз, и все глифы расположены с левой стороны.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
48.0+
8.0 - 47.0
12.0+ 41.0+ 11.0+
5.1 - 10.1 -webkit-
35.0+
15.0 - 34.0 -webkit-

Практикуйте свои знания

What is the function of the CSS property 'writing-mode'?
Считаете ли это полезным?