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

Описание

Атрибут dir определяет направление текста внутри элемента <span>. Он особенно полезен для смешанного контента с языками, использующими разное направление письма (LTR или RTL).

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

<p> Слово на арабском: <span dir="rtl" lang="ar">كلمة</span>, а это английское: <span dir="ltr" lang="en">word</span>. </p>

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

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

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

  • Автоматически переворачивает направление текста и пунктуации
  • Влияет на порядок отображения смешанного текста
  • Работает вместе с атрибутом lang для лучшей семантики
  • Поддерживается всеми современными браузерами

Пример с автоматическим определением:

<p> Смешанный текст: <span dir="auto">Hello (привет) שלום (hello)</span> </p>

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

<style> span[dir="rtl"] { font-family: 'Arial', sans-serif; color: #d32f2f; } span[dir="ltr"] { font-weight: bold; } </style> <p> <span dir="rtl" lang="ar">نص عربي</span> | <span dir="ltr" lang="en">English text</span> </p>

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

  1. Используйте dir="auto" для пользовательского контента
  2. Для статического контента указывайте направление явно
  3. Сочетайте с атрибутом lang для лучшей доступности
  4. Тестируйте отображение в RTL-интерфейсах
  5. Учитывайте направление при позиционировании элементов

Доступность (a11y):

<span dir="rtl" lang="he" aria-label="Hebrew text"> טקסט בעברית </span>