w3docs logo

CSS свойство text-orientation

Свойство text-orientation определяет ориентацию символов в строке.

Имеет пять значений: mixed, upright, sideways, sideways-right, use-glyph-orientation. Все они работаю в вертикальном типографском режиме.

Свойство раньше также имело значения "sideways-left" и "sideways-right", которые сейчас переопределены в значение "sideways-right". Значения "sideways-lr" и "sideways-rl" добавлены к свойству writing-mode для использования с горизонтальным режимом письма.

Свойство text-orientation имеет эффект только в случае, если свойство writing-mode установлено как "vertical".
Значение по умолчанию mixed
Применяется Ко всем элементам, кроме строк, групп строк таблицы, колонок и групп колонок.
Наследуется Да
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.textOrientation = "upright";

Синтаксис

text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      writing-mode: vertical-rl;
      text-orientation: mixed;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-orientation</h2>
    <p>Lorem Ipsum - это текст-"рыба".</p>
  </body>
</html>

Пример со значением "upright":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      p {
      writing-mode: vertical-lr;
      text-orientation: upright;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-orientation</h2>
    <p>Lorem Ipsum - это текст-"рыба".</p>
  </body>
</html>

Рассмотрим другой пример со свойством text-orientation:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      background-color: #fff;
      color: #000;
      font-size: 1.1em;
      }
      .example {
      background: #ccc;
      color: #fff;
      padding: 3em;
      margin: 40px auto 0;
      width: 400px;
      max-width: 400px;
      display: flex;
      }
      h1 {
      color: #8ebf42;
      margin: 0.15em 0.75em 0 0;
      font-family: 'Bungee Shade', cursive;
      -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
      writing-mode: vertical-lr;
      text-orientation: upright;
      -webkit-font-feature-settings: "vkrn", "vpal";
      font-feature-settings: "vkrn", "vpal";
      }
      p {
      margin: 0;
      line-height: 1.5;
      font-size: 1.15em;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства text-orientation</h2>
    <div class="example">
      <h1>Lorem Ipsum</h1>
      <p>
        Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. 
      </p>
    </div>
  </body>
</html>

Значения

Значение Описание
mixed Символы повернуты на 90° по часовой стрелке. Значение по умолчанию.
upright Символы горизонтального скрипта расположены естественным образом (прямые), и также глифы для вертикального скрипта. Это значение располагает все символы слева направо. Использованное значение для направления должно быть ltr.
sideways Символы расположены горизонтально, но вся строка повернута на 90°по часовой стрелке.
sideways-right Алиас для sideways с целями обеспечения совместимости.
use-glyph-orientation Ведет к использованию устаревших SVG свойств: glyph-orientation-vertical и glyph-orientation-horizontal.
Данное значение больше не используется.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

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

chrome firefox safari opera
48.0+ 41.0+ 10.1 -webkit- 35.0+

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

What values can the CSS property 'text-orientation' take?
Считаете ли это полезным?