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

Описание

Атрибут dir определяет направление текста внутри элемента <section>, что особенно важно для многоязычных сайтов с поддержкой языков с написанием справа налево (RTL).

Пример использования:
<section dir="rtl" lang="ar"> <h2>السلام عليكم</h2> <p>هذا قسم باللغة العربية</p> </section>

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

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

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

  • Наследуется всеми дочерними элементами
  • Влияет на положение полосы прокрутки
  • Меняет порядок колонок в CSS Grid/Flexbox
  • Работает вместе с CSS-свойством direction

Пример с автоматическим определением:

<section dir="auto"> <p>هذا نص عربي</p> <p>This is English text</p> </section>

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

  • Всегда указывайте вместе с атрибутом lang
  • Для форм используйте dir="auto" на полях ввода
  • Тестируйте верстку в RTL-режиме
  • Используйте логические свойства CSS (start/end вместо left/right)

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

  • Не все браузеры правильно обрабатывают смешанные направления
  • Может потребоваться дополнительная стилизация
  • Некоторые плагины могут не поддерживать RTL

Примечание: Для комплексной RTL-поддержки:

  • Используйте препроцессоры с RTL-миксинами
  • Проверяйте порядок tabindex
  • Адаптируйте анимации и трансформации