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

Описание

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

Пример использования:
<!-- LTR (по умолчанию) --> <code dir="ltr">console.log('Hello');</code> <!-- RTL для арабского кода --> <code dir="rtl" lang="ar"> // كود برمجي باللغة العربية </code> <!-- Автоматическое определение --> <code dir="auto">mixedCodeWithRTLChars</code>

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

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

Особенности для фрагментов кода:

  • Большинство языков программирования используют LTR
  • RTL может применяться для:
    • Комментариев на RTL-языках
    • Строковых литералов с RTL-текстом
    • Специальных DSL с RTL-синтаксисом
  • Автоматическое определение (auto) работает не всегда корректно для кода

Пример с CSS:

<style> /* Стили для RTL-кода */ code[dir="rtl"] { direction: rtl; unicode-bidi: embed; font-family: 'Courier New', monospace; } </style> <code dir="rtl" lang="he"> // קוד בשפה העברית </code>

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

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

Пример с JavaScript:

<code id="dynamic-dir">SomeCode</code> <script> function setCodeDirection(codeText) { const codeElement = document.getElementById('dynamic-dir'); // Простая проверка на RTL-символы const hasRTL = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(codeText); codeElement.dir = hasRTL ? 'rtl' : 'ltr'; codeElement.textContent = codeText; } </script>

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

  • Не влияет на порядок операторов в коде (только на отображение)
  • Может нарушить выравнивание в многострочных блоках
  • Для смешанного контента используйте unicode-bidi: isolate
  • Проверяйте отображение в разных браузерах

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