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

Описание

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

Пример использования:
<!-- Для английского/русского контента --> <main dir="ltr"> <h1>Welcome to our website</h1> <p>This content flows from left to right.</p> </main> <!-- Для арабского/иврита --> <main dir="rtl" lang="ar">

مرحبا بكم في موقعنا

هذا المحتوى يقرأ من اليمين إلى اليسار

</main>

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

Значение Направление Применение
ltr Слева направо (Left-to-Right) Английский, русский, европейские языки
rtl Справа налево (Right-to-Left) Арабский, иврит, персидский
auto Автоматическое определение Когда направление неизвестно заранее

Ключевые особенности:

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

Пример с CSS-логическими свойствами:

<style> main { padding-inline-start: 2rem; /* Заменяет padding-left */ margin-inline-end: 1rem; /* Заменяет margin-right */ border-inline-start: 3px solid blue; /* Заменяет border-left */ } </style> <main dir="rtl"> <!-- Арабский или иврит контент --> </main>

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

  1. Всегда указывайте dir вместе с атрибутом lang
  2. Для динамических интерфейсов меняйте направление через JavaScript:
    document.querySelector('main').dir = 'rtl';
  3. Тестируйте интерфейс с реальными RTL-языками
  4. Для форм используйте специальные RTL-паттерны

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

  • Не все CSS-фреймворки полностью поддерживают RTL
  • Некоторые плагины могут некорректно работать с RTL-режимом
  • Требуется дополнительное тестирование верстки

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