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

Описание

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

Пример использования:
<header dir="rtl"> <h1>مرحبا بكم في موقعنا</h1> <p>هذا نص عربي مثال</p> </header> <header dir="ltr"> <h1>Welcome to our site</h1> <p>This is English text</p> </header>

Допустимые значения:

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

Рекомендации по использованию:

  • Используйте dir="rtl" для:
    • Арабского языка
    • Иврита
    • Персидского языка
    • Других RTL-языков
  • Сочетайте с атрибутом lang для лучшей семантики
  • Для сложных многоязычных страниц устанавливайте dir на конкретных элементах
  • Тестируйте верстку в обоих направлениях

Пример с CSS для RTL:

<style> header[dir="rtl"] { text-align: right; padding-right: 20px; } header[dir="rtl"] .logo { float: left; margin-left: 0; margin-right: 15px; } </style> <header dir="rtl"> <img class="logo" src="logo.png" alt="Лого"> <h1>عنوان الصفحة</h1> </header>

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

  • Меняет не только текст, но и расположение элементов
  • Влияет на порядок колонок таблиц
  • Изменяет направление полосы прокрутки
  • Автоматически зеркалит CSS свойства типа padding-left
  • Для полного RTL-отображения может потребоваться дополнительная стилизация

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