Атрибут dir тега <details>
Описание
Атрибут dir определяет направление текста внутри элемента <details> и его содержимого. Особенно полезен для многоязычных интерфейсов с поддержкой языков с написанием справа налево (RTL).
<!-- LTR (слева направо) -->
<details dir="ltr">
<summary>English Content</summary>
<p>This text flows from left to right.</p>
</details>
<!-- RTL (справа налево) -->
<details dir="rtl" lang="ar">
<summary>محتوى عربي</summary>
<p>هذا النص يتدفق من اليمين إلى اليسار</p>
</details>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
ltr |
Left-to-right (слева направо) | Для языков с LTR-направлением (английский, русский) |
rtl |
Right-to-left (справа налево) | Для языков с RTL-направлением (арабский, иврит) |
auto |
Автоматическое определение | Когда направление неизвестно заранее |
Особенности работы:
- Наследуется всеми дочерними элементами
- Влияет на положение маркера раскрытия (треугольника)
- Рекомендуется сочетать с атрибутом
lang - Для RTL-языков автоматически меняет направление текста и пунктуации
Пример с CSS:
<style>
/* Стили для RTL-контента */
details[dir="rtl"] {
text-align: right;
border-right: 3px solid #4CAF50;
padding-right: 15px;
}
/* Стили для LTR-контента */
details[dir="ltr"] {
border-left: 3px solid #4CAF50;
padding-left: 15px;
}
</style>
<details dir="rtl" lang="ar">
<summary>إعدادات النظام</summary>
<p>هذه الصفحة تحتوي على إعدادات النظام الأساسية</p>
</details>
Динамическое управление:
<details id="dynamic-dir">
<summary>Dynamic Direction Example</summary>
<p>This content will change direction</p>
</details>
<button onclick="toggleDirection()">Toggle Direction</button>
<script>
function toggleDirection() {
const details = document.getElementById('dynamic-dir');
details.dir = details.dir === 'rtl' ? 'ltr' : 'rtl';
details.lang = details.dir === 'rtl' ? 'ar' : 'en';
}
</script>
Рекомендации по использованию:
- Для RTL-языков всегда указывайте
dir="rtl"явно - Используйте
dir="auto"только для пользовательского контента - Тестируйте положение маркеров раскрытия в RTL-режиме
- Для форм внутри
<details>может потребоваться дополнительная настройка
Особенности RTL-отображения:
<style>
/* Кастомизация маркера для RTL */
details[dir="rtl"] summary::before {
content: "▶";
margin-left: 5px;
margin-right: 0;
}
details[dir="rtl"][open] summary::before {
content: "▼";
}
</style>
<details dir="rtl" lang="he">
<summary>הגדרות מתקדמות</summary>
<p>פרטי ההגדרות המתקדמות של המערכת</p>
</details>
Примечание: Правильное использование атрибута dir критически важно для обеспечения корректного отображения интерфейсов на RTL-языках. Всегда тестируйте такие элементы с реальным контентом, так как некоторые символы и цифры могут отображаться неожиданно в RTL-контексте.