направление

Базовая линия Широко доступна

Эта функция хорошо отработана и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Предупреждение: В случае возможности авторам рекомендуется избегать использования свойства CSS direction и использовать вместо него глобальный атрибут HTML dir .

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

Попробуйте

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

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

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

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

Синтаксис

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

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

Значения

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

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

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

Начальное значение	`ltr`
Применимо к	всем элементам
Наследуется	да
Вычисленное значение	как указано
Тип анимации	Не анимируемое

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

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>

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

Спецификация
CSS Writing Modes Уровень 4 # direction

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

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`direction`	2	12	1	9.2	1	18	4	10.1	1	1.0	4.4
`ltr`	2	12	1	15	1	18	4	14	1	1.0	4.4
`rtl`	2	12	1	15	1	18	4	14	1	1.0	4.4
`vertical_slider_direction`	124	124	120 Поддерживается только для ползунков вертикального диапазона.	110	16.5 Поддерживается только для ползунков вертикального диапазона.	124	120 Поддерживается только для ползунков вертикального диапазона.	82	16.5 Поддерживается только для ползунков вертикального диапазона.	27.0	124

См. также

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

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/direction