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

Описание

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

Пример использования:
<q dir="rtl" lang="ar"> هذه مقولة باللغة العربية </q> <q dir="ltr"> This is an English quote </q>

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

Значение Описание
ltr Слева направо (по умолчанию для большинства языков)
rtl Справа налево (для арабского, иврита и др.)
auto Автоматическое определение направления (на основе содержимого)

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

  • Автоматические кавычки браузера адаптируются к направлению текста
  • Лучше всего работает в сочетании с атрибутом lang
  • Наследуется дочерними элементами
  • Не влияет на выравнивание текста (используйте CSS для text-align)

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

<q dir="auto"> This is a mixed quote - هذه مقولة مختلطة </q>

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

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

Пример с CSS стилизацией:

<style> .arabic-quote { font-family: 'Traditional Arabic', Arial, sans-serif; font-size: 1.2em; color: #333; } </style> <q dir="rtl" lang="ar" class="arabic-quote"> الكتب هي الغذاء الباطني للعقل </q>

Важные замечания:

  • Кавычки могут отображаться по-разному в RTL-контексте
  • Некоторые браузеры могут некорректно обрабатывать смешанное направление
  • Для сложных случаев используйте CSS-свойство direction

Примечание: Хотя атрибут dir автоматически управляет направлением кавычек, для полного контроля над отображением рассмотрите использование CSS-псевдоэлементов ::before и ::after с ручным указанием кавычек.