Атрибут dir тега <aside>
Описание
Атрибут dir определяет направление текста в элементе <aside>. Может принимать значения ltr (слева направо), rtl (справа налево) или auto (автоматическое определение).
<!-- Боковая панель с текстом слева направо -->
<aside dir="ltr">
<h3>Информационная панель</h3>
<p>Этот текст отображается в стандартном направлении.</p>
</aside>
<!-- Боковая панель с текстом справа налево -->
<aside dir="rtl" lang="ar">
لوحة المعلومات
هذا النص يظهر من اليمين إلى اليسار
</aside>Значения атрибута:
| Значение | Описание | Когда использовать |
|---|---|---|
ltr |
Left-to-right (слева направо) | Для языков с письмом LTR (английский, русский) |
rtl |
Right-to-left (справа налево) | Для языков с письмом RTL (арабский, иврит) |
auto |
Автоматическое определение | Для смешанного контента |
Рекомендации по использованию:
- Всегда указывайте атрибут
langвместе сdir - Для всего документа задавайте направление в теге
<html> - Для смешанного контента используйте
dir="auto" - Проверяйте отображение в целевых браузерах
Пример с автоматическим определением:
<aside dir="auto">
<h3>Multilingual Content</h3>
<p>هذه جملة بالعربية</p>
<p>This is an English sentence</p>
<p>Это предложение на русском</p>
</aside>
Стилизация для разных направлений:
<style>
/* Общие стили */
aside {
padding: 15px;
margin: 10px 0;
border: 1px solid #ddd;
}
/* Специфические стили для RTL */
aside[dir="rtl"] {
text-align: right;
}
/* Иконки для разных направлений */
aside[dir="ltr"] h3::before {
content: "→ ";
}
aside[dir="rtl"] h3::before {
content: "← ";
}
</style>
<aside dir="ltr">
<h3>Left to Right</h3>
<p>Standard text direction</p>
</aside>
<aside dir="rtl" lang="he">
ימין לשמאל
טקסט בעברית
</aside>
Важно: Атрибут dir влияет не только на направление текста, но и на:
- Положение полосы прокрутки
- Порядок колонок в таблицах
- Расположение элементов в CSS Grid и Flexbox
Доступность:
- Скринридеры используют
dirдля правильного озвучивания текста - Сочетайте с ARIA-атрибутами для сложных случаев
- Тестируйте с реальными скринридерами (NVDA, VoiceOver)
Пример с динамическим изменением:
<aside id="toggle-direction" dir="ltr" lang="en">
<h3>Toggle Text Direction</h3>
<p>This content can switch direction</p>
</aside>
<button onclick="toggleDir()">Toggle Direction</button>
<script>
function toggleDir() {
const aside = document.getElementById('toggle-direction');
aside.dir = aside.dir === 'ltr' ? 'rtl' : 'ltr';
aside.lang = aside.dir === 'ltr' ? 'en' : 'ar';
}
</script>
Совет: Для многоязычных сайтов используйте CSS-логические свойства (margin-inline-start, padding-inline-end) вместо физических (left, right), чтобы стили автоматически адаптировались к направлению текста.
Лучшие практики:
- Для RTL-языков используйте соответствующие шрифты
- Проверяйте работу CSS-стилей в обоих направлениях
- Учитывайте направление при позиционировании элементов
- Тестируйте с реальным контентом на целевом языке
Примечание: Хотя современные браузеры обычно правильно определяют направление текста автоматически, явное указание через атрибут dir помогает избежать ошибок рендеринга.