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

Описание

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

Пример использования:
<cite dir="ltr">Left-to-Right Citation</cite> <cite dir="rtl">اقتباس من اليمين إلى اليسار</cite> <cite dir="auto">הציטוט הזה בעברית</cite>

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

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

Рекомендации по использованию:

  • Для многоязычных сайтов указывайте направление явно
  • Значение auto полезно для пользовательского контента
  • Сочетайте с соответствующим lang-атрибутом
  • Для сложных случаев используйте CSS-свойство direction

Пример с CSS:

<style> .arabic-cite { direction: rtl; unicode-bidi: embed; } </style> <cite class="arabic-cite" lang="ar">اقتباس مهم</cite>

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

  • Влияет на порядок отображения текста и знаков препинания
  • Меняет положение полосы прокрутки (для блочных элементов)
  • Автоматическое определение работает для большинства языков
  • Наследуется дочерними элементами

Пример с JavaScript:

<cite id="dynamic-dir">Text with dynamic direction</cite> <script> // Установка направления в зависимости от языка function setDirection(lang) { const cite = document.getElementById('dynamic-dir'); cite.dir = ['ar', 'he', 'fa'].includes(lang) ? 'rtl' : 'ltr'; } </script>

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

  • Не путайте с text-align (выравнивание ≠ направление)
  • Для смешанного контента используйте unicode-bidi: isolate
  • Проверяйте отображение в разных браузерах
  • Для форм ввода используйте dir="auto"

Примечание: Правильное использование атрибута dir особенно важно для цитирования текстов на разных языках, так как сохраняет оригинальное направление чтения и структуру цитаты.