Атрибут dir тега <ul>

Описание

Атрибут dir определяет направление текста в списке <ul>. Он особенно полезен для многоязычных сайтов, где нужно отображать списки с разными направлениями письма.

Пример использования:
<ul dir="rtl"> <li>عنصر القائمة الأول</li> <li>عنصر القائمة الثاني</li> </ul> <ul dir="ltr"> <li>First list item</li> <li>Second list item</li> </ul>

Значения атрибута:

Значение Описание Когда использовать
ltr Слева направо (left-to-right) Для языков с письмом слева направо (английский, русский)
rtl Справа налево (right-to-left) Для языков с письмом справа налево (арабский, иврит)
auto Автоматическое определение Когда направление неизвестно заранее

Особенности работы:

  • Маркеры списка (точки/кружки) перемещаются на противоположную сторону при RTL
  • Влияет на порядок отображения текста и чисел
  • Работает вместе с атрибутом lang
  • Наследуется всеми элементам списка (<li>)

Пример с CSS:

<style> ul[dir="rtl"] { padding-right: 20px; padding-left: 0; } ul[dir="ltr"] { padding-left: 20px; padding-right: 0; } </style> <ul dir="rtl"> <li>العنصر الأول</li> <li>العنصر الثاني</li> </ul>

Рекомендации:

  • Всегда указывайте lang вместе с dir
  • Для всего документа задавайте направление в теге <html>
  • Тестируйте отображение в разных браузерах
  • Используйте CSS-свойство direction для сложных случаев

Ограничения:

  • Не изменяет порядок элементов в DOM
  • Может некорректно работать с некоторыми специальными символами
  • Для сложных многоязычных списков могут потребоваться дополнительные настройки

Пример смешанного направления:

<ul dir="rtl"> <li dir="ltr">2025 - السنة الحالية</li> <li>العنصر الثاني</li> </ul>

Примечание: Для RTL-языков маркеры списка обычно отображаются справа, но их точное положение может зависеть от браузера и CSS-стилей.