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

Описание

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

Пример использования:
<button dir="ltr">Left to Right</button> <button dir="rtl">右から左</button> <button dir="auto">مرحبا</button>
Значение Направление Применение
ltr Слева направо (по умолчанию) Для языков с латинским алфавитом
rtl Справа налево Арабский, иврит и другие RTL-языки
auto Автоматическое определение Когда направление неизвестно заранее

Практический пример с динамическим изменением:

<button id="lang-btn" dir="ltr">English / עברית</button> <script> document.getElementById('lang-btn').addEventListener('click', function() { this.dir = this.dir === 'ltr' ? 'rtl' : 'ltr'; }); </script>

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

  • Влияет только на текст внутри кнопки, не на её положение
  • Для RTL-языков может потребоваться дополнительная CSS-стилизация
  • Автоматическое определение (auto) работает на основе содержимого
  • Наследуется дочерними элементами внутри кнопки

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

<style> button[dir="rtl"] { padding: 8px 15px 8px 25px; /* Смещение текста в RTL-режиме */ } </style> <button dir="rtl">نص عربي</button>

Рекомендации:

  • Используйте dir="auto" для пользовательского контента
  • Для целых страниц на RTL-языках лучше задавать направление в HTML-теге
  • Проверяйте выравнивание иконок при изменении направления
  • Сочетайте с lang-атрибутом для лучшей семантики

Примечание: Хотя атрибут dir можно использовать для отдельных элементов, для целостного RTL-интерфейса лучше применять CSS-свойство direction ко всему документу.