Атрибут dir тега <ol>
Описание
Атрибут dir определяет направление текста в упорядоченном списке <ol>. Он может изменять как порядок нумерации, так и направление текста элементов списка.
<ol dir="rtl">
<li>عنصر القائمة الأول</li>
<li>عنصر القائمة الثاني</li>
</ol>
Доступные значения:
| Значение | Описание | Влияние на список |
|---|---|---|
ltr (по умолчанию) |
Слева направо (left-to-right) | Нумерация начинается слева, текст выравнивается влево |
rtl |
Справа налево (right-to-left) | Нумерация начинается справа, текст выравнивается вправо |
auto |
Автоматическое определение | Направление определяется по содержимому первого элемента |
Пример с разными направлениями:
<ol dir="ltr">
<li>Left-to-right item</li>
<li>Элемент слева направо</li>
</ol>
<ol dir="rtl">
<li>Right-to-left item</li>
<li>عنصر من اليمين إلى اليسار</li>
</ol>
Сочетание с CSS:
<style>
ol[dir="rtl"] {
padding-right: 20px;
padding-left: 0;
}
ol[dir="ltr"] {
padding-left: 20px;
padding-right: 0;
}
</style>
<ol dir="rtl">
<li>النص باللغة العربية</li>
<li>טקסט בעברית</li>
</ol>
Рекомендации по использованию:
- Используйте
dir="rtl"для арабского, иврита и других RTL-языков - Для смешанного контента используйте
dir="auto" - Сочетайте с соответствующим языковым атрибутом
lang - Учитывайте влияние на нумерацию и положение маркеров
Пример с автоматическим определением:
<ol dir="auto">
<li>English text</li>
<li>نص عربي</li>
<li>Another English item</li>
</ol>
Особенности работы:
- Изменяет порядок нумерации (1, 2, 3... → ...3, 2, 1)
- Влияет на положение маркеров списка
- Не изменяет порядок элементов в DOM
- Может переопределяться CSS-свойством
direction
Примечание: Атрибут dir особенно важен для интернационализации веб-страниц. Для полноценной поддержки RTL-языков также может потребоваться дополнительная CSS-стилизация и использование соответствующих языковых атрибутов.