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

Описание

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

Пример использования:
<details> <summary dir="rtl">عنوان باللغة العربية</summary> <p>محتوى باللغة العربية</p> </details> <details> <summary dir="ltr">English title</summary> <p>English content</p> </details>

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

Значение Описание Когда использовать
ltr Направление текста слева направо (Left-to-Right) Для языков с письмом слева направо (английский, русский и др.)
rtl Направление текста справа налево (Right-to-Left) Для языков с письмом справа налево (арабский, иврит и др.)
auto Автоматическое определение направления Когда направление зависит от содержимого

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

  • Влияет только на текст внутри <summary>
  • Не меняет положение маркера раскрытия (треугольника)
  • Наследуется дочерними текстовыми элементами
  • Поддерживается всеми современными браузерами

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

<details> <summary dir="auto">مرحبا Hello</summary> <p>Смешанный текст с автоматическим определением направления</p> </details>

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

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

Ограничения:

  • Не влияет на положение иконки раскрытия/сворачивания
  • Может потребоваться дополнительный CSS для правильного отображения
  • Автоматическое определение не всегда работает корректно

Примечание: Для сложных многоязычных интерфейсов рассмотрите использование CSS-свойства direction вместе с unicode-bidi.