Атрибут dir тега <nav>
Описание
Атрибут dir определяет направление текста в элементе <nav> и его дочерних элементах. Это особенно важно для навигационных меню на языках с письмом справа налево (RTL).
<nav dir="rtl">
<ul>
<li><a href="/">الصفحة الرئيسية</a></li>
<li><a href="/about">معلومات عنا</a></li>
<li><a href="/contact">اتصل بنا</a></li>
</ul>
</nav>
Допустимые значения:
| Значение | Описание | Применение |
|---|---|---|
ltr |
Слева направо (по умолчанию) | Для большинства европейских языков |
rtl |
Справа налево | Для арабского, иврита и других RTL-языков |
auto |
Автоматическое определение | Когда направление зависит от содержимого |
Особенности стилизации RTL-навигации:
<style>
/* Общие стили для меню */
nav {
padding: 1rem;
background: #f8f9fa;
}
/* Специфичные стили для RTL */
nav[dir="rtl"] {
text-align: right;
}
nav[dir="rtl"] ul {
padding-right: 0;
}
nav[dir="rtl"] li {
margin-left: 1rem;
margin-right: 0;
}
</style>
<nav dir="rtl">
<ul>
<li><a href="/">الصفحة الرئيسية</a></li>
<li><a href="/about">معلومات عنا</a></li>
</ul>
</nav>
Рекомендации по использованию:
- Используйте
dir="rtl"для всего документа при работе с RTL-языками - Для многоязычных сайтов устанавливайте атрибут динамически
- Проверяйте правильность отображения иконок и стрелок
- Тестируйте расположение выпадающих меню
- Учитывайте направление теней и градиентов
Пример с автоматическим определением:
<nav dir="auto">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/ar/" lang="ar">الصفحة الرئيسية</a></li>
</ul>
</nav>
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Может потребоваться дополнительная CSS-адаптация
- Не влияет на порядок tabindex
- Для сложных макетов используйте CSS-свойство direction
Примечание: Атрибут dir особенно важен для многоязычных сайтов с поддержкой RTL-языков. Правильное его использование обеспечит корректное отображение навигационного меню для всех пользователей, независимо от языка интерфейса.