Свойство CSS direction
Свойство CSS direction задаёт направление написания текста. Изучите примеры и попробуйте сами.
Свойство CSS direction задаёт базовое направление письма текста и строчного содержимого — слева направо (ltr, значение по умолчанию) или справа налево (rtl). Именно это свойство обеспечивает корректное отображение письменных систем с направлением справа налево: арабской, иврита, персидской и урду.
На этой странице объясняется, что именно контролирует direction, чем оно отличается от HTML-атрибута dir, когда оно действительно нужно, и какие подводные камни встречаются на практике.
На что влияет direction
Установка direction на блочном элементе одновременно изменяет несколько вещей:
- Базовое направление текста содержимого элемента.
- Выравнивание текста по умолчанию внутри элемента (
rtlвыравнивает текст по правому краю,ltr— по левому), если оно не переопределено свойствомtext-align. - Порядок ячеек таблицы в строке (для
rtl— сначала крайняя правая). - Направление двунаправленных вложений, создаваемых совместно со свойством
unicode-bidi.
direction также влияет на то, с какой стороны отображаются маркеры списков, полосы прокрутки и переполнение, поскольку меняется начало строки элемента.
direction и атрибут HTML dir
В реальных документах направление обычно задаётся через HTML-атрибут dir (<html dir="rtl">), а не через CSS-свойство, поскольку dir несёт семантическую нагрузку, на которую опираются вспомогательные технологии и алгоритм двунаправленного текста браузера.
Эти два механизма не являются полностью эквивалентными: в отличие от HTML-атрибута dir, CSS-свойство direction не наследуется ячейками таблицы от столбцов таблицы — ячейки находятся внутри строк, а не столбцов, поэтому они наследуют направление от самого элемента таблицы.
Для изменения порядка элементов в чисто визуальной раскладке (элементы flex/grid, отступы) предпочтительнее использовать современные логические свойства и writing-mode. Используйте direction именно для управления направлением чтения текста. Смотрите writing-mode.
| Начальное значение | ltr |
|---|---|
| Применяется к | Всем элементам. |
| Наследуется | Да. |
| Анимируемость | Дискретно. |
| Версия | CSS2 |
| DOM-синтаксис | object.style.direction = "rtl"; |
Синтаксис
Синтаксис свойства CSS direction
direction: ltr | rtl | initial | inherit;Пример: сравнение ltr и rtl
Элемент <p> сохраняет направление ltr по умолчанию; элемент <div> переключён на rtl, поэтому его текст начинается с правого края и читается влево.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
direction: rtl;
}
</style>
</head>
<body>
<p>As you can see, this text is written with default direction.</p>
<div>However, this text is written from right to left as we defined.</div>
</body>
</html>Результат
![Свойство CSS direction](https://api.w3docs.com/uploads/media/default/0001/03/576170a14b5c571d29380b8bdc5880bafac595b3.png "CSS direction property rtl example" =420x)
В примере выше используется значение rtl, поэтому текст в элементе <div> читается справа налево и выравнивается по правому краю по умолчанию.
Пример: список и цитата с направлением справа налево
Поскольку direction переворачивает начало строки, маркеры списка и выравнивание текста по умолчанию перемещаются на правую сторону — именно то, что нужно для арабских или еврейских фрагментов текста.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.rtl {
direction: rtl;
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<ul class="rtl">
<li>First item</li>
<li>Second item</li>
</ul>
</body>
</html>Маркеры отображаются справа, а текст выравнивается по правому краю — без каких-либо правил text-align.
Значения
| Значение | Описание | Пример |
|---|---|---|
| ltr | Означает, что направление текста будет слева направо. Это значение свойства по умолчанию. | Попробовать » |
| rtl | Означает, что направление текста будет справа налево. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует свойство от родительского элемента. |
Частые ошибки
directionсамо по себе не влияет на порядок строчных блоков. Чтобы фактически изменить порядок смешанного текста слева направо и справа налево, также необходимо свойствоunicode-bidi(например,unicode-bidi: bidi-override).- Выравнивание и направление.
rtlменяет выравнивание по умолчанию, но явное правилоtext-alignимеет приоритет. Если текст выравнивается «не так» после смены направления, проверьте наличие конфликтующегоtext-align. - Свойство наследуется. Установите
directionодин раз на контейнере верхнего уровня (или через<html dir="rtl">) — всё поддерево подхватит его, за исключением ячеек таблицы, как отмечалось выше.
Связанные свойства
unicode-bidi— тонкое управление двунаправленным текстом.writing-mode— вертикальный и горизонтальный поток, направление блоков.text-align— явное горизонтальное выравнивание строчного содержимого.