directionСвойство в CSS задает направление потока контента в пределах элемента уровня блока. Это применимо к элементам text, inline и inline-block. Он также устанавливает выравнивание текста по умолчанию и направление перемещения ячеек таблицы в строке таблицы.
.main-content ( direction: rtl; /* Right to Left */ )Допустимые значения:
ltr- Слева направо, по умолчаниюrtl- Справа налевоinherit- наследует свое значение от родительского элемента
Текст на этой странице установлен в ltrнаправлении по умолчанию . Самый распространенный вариант использования rtl- для веб-страниц с текстом на иврите или арабском языке. Вот пример арабского набора в RTL:
طهيس يس تآخت تهات يس وريتتآن فروم ريغت تو لآفت تهات يس وسآد
Также есть атрибут HTML для установки направления:
И свойство CSS, и атрибут HTML будут каскадно передавать направление дочерним элементам. Рекомендуется использовать атрибут HTML, так как он будет работать, даже если CSS не работает или не влияет на страницу по какой-либо причине.
Существует также специальный тег HTML, который можно использовать для изменения направления текста: элемент двунаправленного переопределения. Он существует, поэтому есть элемент без семантики, который можно использовать только для этой цели. Например:
This text will go left to right. This text will go right to left.Чтобы соединить все это с CSS…
*(dir="ltr") ( direction: ltr; unicode-bidi: embed; ) *(dir="rtl") ( direction: rtl; unicode-bidi: embed; ) bdo(dir="ltr") ( direction: ltr; unicode-bidi: bidi-override; ) bdo(dir="rtl") ( direction: rtl; unicode-bidi: bidi-override; )«Bidi» = «двунаправленный»
При создании макетов в пре-сеточном мире pre-flexbox люди часто выбирали между float и inline-block для создания столбцов. Одним из преимуществ inline-block, помимо устранения необходимости очищать float, является то, что изменение свойства direction также меняет расположение на противоположное. Это не относится к числам с плавающей запятой, которые необходимо сбросить, если веб-страница поддерживает несколько языков и направление языка изменилось с ltr на rtl или наоборот.
Если вам нужно изменить направление встроенного элемента (относительно того, что является его элементом уровня родительского блока), вам нужно либо использовать элемент, либо убедиться, что встроенный элемент правильно устанавливает свойство unicode-bidi:
Some regular text reverse direction text text reverse directionspan(dir) ( unicode-bidi: bidi-override; )Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 2.0+ | 1.3+ | Любой | 9.2+ | 5.5+ | Любой | 3.1+ |