Атрибут dir тега <dt>
Описание
Атрибут dir определяет направление текста для элемента <dt> (термина в списке определений). Он особенно полезен для смешанного контента на языках с разным направлением письма.
Совет: Для терминов на арабском, иврите и других RTL-языках всегда указывайте
Пример использования:
dir="rtl".
<dl>
<dt dir="ltr">HTML</dt>
<dd>HyperText Markup Language</dd>
<dt dir="rtl">HTML</dt>
<dd>لغة ترميز النص الفائق</dd>
</dl>
Допустимые значения:
| Значение | Описание | Применение |
|---|---|---|
ltr |
Слева направо (left-to-right) | Латинские, кириллические языки |
rtl |
Справа налево (right-to-left) | Арабский, иврит |
auto |
Автоматическое определение | Смешанный контент |
Правильное применение:
<dl>
<!-- Явное указание направления -->
<dt dir="rtl" lang="ar">CSS</dt>
<dd>تنسيق صفحة ويب</dd>
<!-- Автоматическое определение -->
<dt dir="auto">Web</dt>
<dd>الويب (World Wide Web)</dd>
</dl>
Стилизация для разных направлений:
<style>
dt[dir="ltr"] {
text-align: left;
padding-left: 15px;
}
dt[dir="rtl"] {
text-align: right;
padding-right: 15px;
font-family: 'Traditional Arabic', Tahoma;
}
dt:before {
content: "• ";
}
dt[dir="rtl"]:before {
content: " •";
}
</style>
<dl>
<dt dir="ltr">JavaScript</dt>
<dd>Programming language</dd>
<dt dir="rtl">جافا سكريبت</dt>
<dd>لغة برمجة</dd>
</dl>
Динамическое изменение направления:
<dl>
<dt id="direction-term">Web/الويب</dt>
<dd>World Wide Web</dd>
</dl>
<button onclick="toggleDirection()">Переключить направление</button>
<script>
function toggleDirection() {
const term = document.getElementById('direction-term');
term.dir = term.dir === 'ltr' ? 'rtl' : 'ltr';
}
</script>
Рекомендации по использованию:
- Сочетайте с атрибутом
langдля точного указания языка - Для смешанного контента используйте
dir="auto" - Проверяйте отображение в разных браузерах
- Учитывайте расположение пунктуации и чисел в RTL-текстах
- Для сложных случаев используйте CSS-свойство
direction
Пример с вложенными элементами:
<dl>
<dt dir="rtl">
<span class="term-number">1.</span>
<span class="term-text">شبكة الإنترنت</span>
</dt>
<dd>World Wide Web</dd>
</dl>
<style>
.term-number {
direction: ltr;
display: inline-block;
}
</style>
Примечание: Правильное использование атрибута dir критически важно для многоязычных интерфейсов. Для профессиональной реализации RTL-поддержки часто требуется дополнительная CSS-настройка и тестирование с носителями языка.