Атрибут dir тега <menu>
Описание
Атрибут dir для тега <menu> определяет направление текста в элементах меню. Это особенно важно для многоязычных интерфейсов, где может потребоваться поддержка языков с написанием справа налево (RTL).
<menu dir="rtl">
<li>القائمة الرئيسية</li>
<li>عن الموقع</li>
<li>اتصل بنا</li>
</menu>
Значения атрибута:
| Значение | Направление | Применение |
|---|---|---|
dir="ltr" |
Слева направо (по умолчанию) | Для европейских языков |
dir="rtl" |
Справа налево | Для арабского, иврита и др. |
dir="auto" |
Автоматическое определение | Для смешанного контента |
Пример с автоматическим определением:
<menu dir="auto">
<li>English item</li>
<li>عنصر عربي</li>
<li>Another English item</li>
</menu>
Совместное использование с CSS:
<style>
menu[dir="rtl"] {
padding-right: 0;
padding-left: 20px;
}
menu[dir="rtl"] li {
margin-left: 0;
margin-right: 15px;
}
</style>
<menu dir="rtl">
<li>עברית</li>
<li>العربية</li>
</menu>
Рекомендации по использованию:
- Для всего документа устанавливайте направление на элементе
<html> - Используйте
dir="auto"для пользовательского контента - Проверяйте отображение в разных браузерах
- Сочетайте с CSS-свойством
text-align
Ограничения и совместимость:
- Поддерживается всеми современными браузерами
- Для сложных случаев может потребоваться дополнительный CSS
- Автоматическое определение не всегда точно
- Пунктуация может некорректно отображаться при смешанных направлениях
Примечание: Хотя тег <menu> редко используется в современных веб-приложениях, правильное указание направления текста важно для доступности и корректного отображения интерфейсов на языках с RTL-направлением. Для навигационных меню чаще используют <nav> с <ul>.