Атрибут dir тега <div>
Описание
Атрибут dir определяет направление текста внутри элемента <div>. Это особенно важно для языков с письмом справа налево (RTL), таких как арабский и иврит.
<!-- LTR (по умолчанию) -->
<div dir="ltr">
Этот текст будет отображаться слева направо
</div>
<!-- RTL -->
<div dir="rtl" lang="ar">
هذا النص سوف يعرض من اليمين إلى اليسار
</div>
<!-- Автоопределение -->
<div dir="auto">
Этот текст автоматически определит направление
</div>
Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
ltr |
Слева направо (left-to-right) | Для языков с LTR-направлением (английский, русский) |
rtl |
Справа налево (right-to-left) | Для языков с RTL-направлением (арабский, иврит) |
auto |
Автоматическое определение | Когда направление неизвестно заранее |
Особенности RTL-отображения:
<style>
.content-box {
padding: 15px;
margin: 10px;
border: 1px solid #ddd;
text-align: start; /* Лучше чем left/right */
}
</style>
<div class="content-box" dir="rtl" lang="he">
<p>טקסט בעברית עם כיוון מימין לשמאל</p>
<p>מספרים: 12345</p>
</div>
Лучшие практики:
- Всегда указывайте
langвместе сdir - Для чисел внутри RTL-текста используйте
<span dir="ltr">123</span> - Избегайте CSS-свойств
text-align: left/right- используйтеstart/end - Тестируйте интерфейсы на реальных RTL-языках
Программное управление:
<div id="dynamicDir">
Этот текст может менять направление
</div>
<button onclick="switchToRTL()">RTL</button>
<button onclick="switchToLTR()">LTR</button>
<script>
function switchToRTL() {
document.getElementById('dynamicDir').dir = 'rtl';
document.getElementById('dynamicDir').lang = 'ar';
}
function switchToLTR() {
document.getElementById('dynamicDir').dir = 'ltr';
document.getElementById('dynamicDir').lang = 'ru';
}
</script>
Совместимость и SEO:
- Поддерживается всеми современными браузерами
- Правильно указанное направление улучшает доступность
- Влияет на отображение в поисковых системах для RTL-языков
- Не заменяет необходимости локализации контента
Примечание: Для многоязычных приложений рекомендуется использовать CSS-логические свойства (margin-inline-start, padding-inline-end и т.д.), которые автоматически адаптируются под направление текста.