Свойство CSS `direction`

Свойство direction CSS задаёт направление текста, столбцов таблиц и сеток, а также горизонтальную прокрутку. Используйте rtl для языков, которые пишутся справа налево (например, на иврите или арабском), и ltr для языков, которые пишутся слева направо (например, на английском и большинстве других языков).

Обратите внимание: направление текста обычно задаётся в документе (например, с помощью атрибута dir в HTML), а не напрямую с помощью свойства direction.

Попробуйте

direction: ltr;

direction: rtl;

<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;
  display: flex;
}

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

Синтаксис

/* Keyword values */
direction: ltr;
direction: rtl;

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

Значения

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

ltr

Текст и другие элементы располагаются слева направо. Это значение по умолчанию.

rtl

Текст и другие элементы располагаются справа налево.

Чтобы свойство direction влияло на строчные элементы, значение свойства unicode-bidi должно быть embed или override.

Описание

Это свойство задаёт базовое направление текста для блочных элементов и направление вложенных фрагментов, создаваемых свойством unicode-bidi. Оно также задаёт выравнивание текста по умолчанию, выравнивание блочных элементов и направление расположения ячеек в строке таблицы или сетки.

В отличие от атрибута dir в HTML, свойство direction не наследуется ячейками таблицы от столбцов, поскольку наследование CSS следует дереву документа, а ячейки таблицы находятся внутри строк, но не внутри столбцов.

Свойства direction и unicode-bidi — единственные свойства, на которые не влияет сокращённое свойство all.

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

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

direction = 
  ltr |
  rtl

Примеры

Задание направления справа налево

В приведённом ниже примере показаны две строки текста, обе отображаются с использованием direction: rtl. При такой настройке арабский текст отображается корректно, а в английском тексте точка теперь находится в необычном месте.

blockquote {
  direction: rtl;
  width: 300px;
}

<blockquote>
  <p>This paragraph is in English but incorrectly goes right to left.</p>
  <p></p>
</blockquote>

<blockquote>
  <p>هذه الفقرة باللغة العربية ، لذا يجب الانتقال من اليمين إلى اليسار.</p>
  <p></p>
</blockquote>

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

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

См. также

• unicode-bidi
• writing-mode
• Атрибут direction SVG
• Глобальный атрибут HTML dir
• Создание вертикальных элементов управления формы
• Работа с разными направлениями текста