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	Значение элемента наследуется от родительского элемента.