Атрибут dir тега <dl>

Описание

Атрибут dir определяет направление текста для элемента <dl> (списка определений) и его содержимого. Поддерживает три значения для указания направления письма.

Пример использования:
<dl dir="ltr"> <dt>HTML</dt> <dd>HyperText Markup Language</dd> </dl> <dl dir="rtl"> <dt>HTML</dt> <dd>لغة ترميز النص الفائق</dd> </dl>

Допустимые значения:

Значение Описание Применение
ltr Слева направо (left-to-right) Для языков с латинским, кириллическим письмом
rtl Справа налево (right-to-left) Для арабского, иврита и других RTL-языков
auto Автоматическое определение Когда направление неизвестно заранее

Особенности работы:

  • Наследуется всеми дочерними элементами списка определений
  • Влияет на порядок отображения текста и пунктуации
  • Не изменяет порядок терминов и определений в HTML-коде
  • Рекомендуется сочетать с атрибутом lang

Правильное применение:

<!-- Для смешанного контента --> <dl dir="auto"> <dt>Web</dt> <dd>الويب (الشبكة العنكبوتية العالمية)</dd> </dl> <!-- Явное указание направления --> <dl dir="rtl" lang="ar"> <dt>CSS</dt> <dd>تنسيق صفحة ويب</dd> </dl>

Стилизация для разных направлений:

<style> /* Общие стили для списка определений */ dl { padding: 15px; border: 1px solid #ddd; } /* Специфичные стили для RTL */ dl[dir="rtl"] { text-align: right; } /* Отступы для терминов */ dl[dir="ltr"] dt { padding-left: 20px; } dl[dir="rtl"] dt { padding-right: 20px; } </style> <dl dir="ltr"> <dt>JavaScript</dt> <dd>Programming language for the Web</dd> </dl> <dl dir="rtl"> <dt>جافا سكريبت</dt> <dd>لغة برمجة للويب</dd> </dl>

Динамическое изменение направления:

<dl id="directionDemo"> <dt>Direction</dt> <dd>This text will change direction</dd> </dl> <button onclick="toggleDirection()">Toggle Direction</button> <script> function toggleDirection() { const dl = document.getElementById('directionDemo'); dl.dir = dl.dir === 'ltr' ? 'rtl' : 'ltr'; } </script>

Рекомендации по использованию:

  • Всегда указывайте dir для контента на RTL-языках
  • Используйте auto для пользовательского контента с неизвестным направлением
  • Тестируйте отображение в разных браузерах
  • Для сложных интерфейсов используйте CSS-свойство direction
  • Учитывайте влияние на расположение знаков препинания

Ограничения и совместимость:

  • Поддерживается всеми современными браузерами
  • Не изменяет порядок элементов в DOM
  • Для полной поддержки RTL может потребоваться дополнительная CSS-настройка
  • Влияет только на текстовое содержимое, не на структуру списка

Примечание: Атрибут dir особенно важен для многоязычных сайтов и приложений, поддерживающих языки с разным направлением письма. Для профессиональной реализации RTL-интерфейсов часто требуется комплексная настройка как HTML-атрибутов, так и CSS-стилей.