Атрибут dir тега <li>
Описание
Атрибут dir определяет направление текста в элементе <li>. Он может принимать значения ltr (слева направо), rtl (справа налево) или auto (автоматическое определение).
<ul>
<li dir="ltr">Это текст слева направо (по умолчанию)</li>
<li dir="rtl">זה טקסט בעברית (מימין לשמאל)</li>
<li dir="auto">هذا نص بالعربية (اتجاه تلقائي)</li>
</ul>
Особенности работы:
| Значение | Описание | Когда использовать |
|---|---|---|
ltr |
Текст направлен слева направо (Left-to-Right) | Для языков с латинским, кириллическим алфавитом |
rtl |
Текст направлен справа налево (Right-to-Left) | Для арабского, иврита, персидского языков |
auto |
Направление определяется автоматически | Когда язык контента неизвестен заранее |
Совместное использование с языком:
<ul>
<li dir="rtl" lang="ar">اللغة العربية</li>
<li dir="rtl" lang="he">עברית</li>
<li dir="ltr" lang="en">English text</li>
</ul>
Стилизация в зависимости от направления:
<style>
li[dir="rtl"] {
text-align: right;
padding-right: 15px;
border-right: 3px solid #4CAF50;
}
li[dir="ltr"] {
text-align: left;
padding-left: 15px;
border-left: 3px solid #2196F3;
}
</style>
<ul>
<li dir="ltr">Left-to-right item</li>
<li dir="rtl">عنصر من اليمين لليسار</li>
</ul>
Рекомендации по использованию:
- Используйте
dir="rtl"для арабских и еврейских текстов - Сочетайте с атрибутом
langдля лучшей семантики - Для многоязычных сайтов устанавливайте направление динамически
- Проверяйте отображение знаков препинания в RTL-режиме
Особенности RTL-отображения:
- Маркеры списка перемещаются в правую сторону
- Порядок элементов в навигационных меню может инвертироваться
- CSS-свойства типа
padding-leftиmargin-rightтребуют особого внимания - Цифры в арабском языке могут требовать специальной обработки
Примечание: Атрибут dir особенно важен для интернационализации веб-приложений. Для сложных RTL-интерфейсов рассмотрите использование CSS-логических свойств (например, margin-inline-start вместо margin-left).