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

Описание

Атрибут dir определяет направление текста в диалоговом окне <dialog>. Это особенно важно для языков с письмом справа налево (RTL), таких как арабский или иврит, где требуется корректное отображение интерфейса.

Пример использования:
<!-- LTR (по умолчанию) --> <dialog dir="ltr"> <h3>Standard Dialog</h3> <p>This dialog uses left-to-right direction.</p> </dialog> <!-- RTL диалог --> <dialog dir="rtl" lang="ar">

حوار تطبيقي

هذا الحوار يستخدم اتجاه النص من اليمين إلى اليسار

</dialog> <!-- Автоопределение --> <dialog dir="auto"> <p>Этот диалог автоматически определит направление текста</p> </dialog>

Значения атрибута:

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

Особенности RTL-диалогов:

<style> dialog[dir="rtl"] { text-align: right; } dialog[dir="rtl"] button { margin-left: 0; margin-right: 10px; } </style> <dialog dir="rtl" lang="he">

תיבת דו-שיח

זהו דיאלוג בעברית עם כיוון טקסט מימין לשמאל

</dialog>

Лучшие практики:

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

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

<dialog id="languageDialog"> <div id="dialogContent"> <h3>Language Settings</h3> <p>Select your preferred language direction</p> </div> <button onclick="setDirection('ltr')">LTR</button> <button onclick="setDirection('rtl')">RTL</button> </dialog> <script> function setDirection(direction) { const dialog = document.getElementById('languageDialog'); dialog.dir = direction; if(direction === 'rtl') { dialog.lang = 'ar'; dialog.querySelector('#dialogContent').innerHTML = `

إعدادات اللغة

اختر اتجاه اللغة المفضل لديك

`; } else { dialog.lang = 'en'; dialog.querySelector('#dialogContent').innerHTML = `

Language Settings

Select your preferred language direction

`; } } </script>

Совместимость и SEO:

  • Поддерживается всеми современными браузерами
  • Правильно указанное направление улучшает доступность
  • Влияет на отображение в поисковых системах для RTL-языков
  • Не заменяет необходимости локализации контента

Примечание: Для многоязычных приложений рекомендуется создавать систему динамического переключения направления текста. Храните предпочтения пользователя и применяйте соответствующий dir при открытии каждого диалога.