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

Описание

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

Пример использования:
<textarea dir="rtl"> نص باللغة العربية </textarea>

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

Значение Описание Когда использовать
ltr Текст направлен слева направо (по умолчанию) Для большинства европейских языков
rtl Текст направлен справа налево Для арабского, иврита и других RTL-языков
auto Направление определяется автоматически по содержимому Для полей с возможностью ввода на разных языках

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

  • Влияет только на направление текста, не на выравнивание
  • Для auto направление определяется по первому сильному символу
  • Работает вместе с CSS-свойством direction
  • Поддерживается всеми современными браузерами

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

<textarea dir="auto" placeholder="Введите текст на любом языке"></textarea>

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

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

Пример полной реализации:

<div class="multilingual-field"> <label>Комментарий (Commentaire - تعليق):</label> <textarea dir="auto" lang="auto" placeholder="Write in any language / Écrivez dans n'importe quelle langue / اكتب بأي لغة"> </textarea> </div> <style> .multilingual-field textarea { width: 100%; padding: 8px; text-align: start; /* Важно для правильного выравнивания */ } </style>

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

  • Автоматическое определение не всегда точно
  • Смешанные языки могут вызывать проблемы
  • Старые браузеры могут некорректно обрабатывать auto
  • Не влияет на выравнивание текста (нужен CSS)

Советы по работе с RTL:

<style> /* Стили для RTL-интерфейсов */ .rtl-textarea { text-align: right; font-family: 'Arabic Typesetting', 'Arial Hebrew', sans-serif; } </style> <textarea dir="rtl" class="rtl-textarea" lang="ar"> النص العربي هنا </textarea>

Для сложных многоязычных решений рассмотрите:

  • Библиотеки определения направления текста
  • Отдельные стили для LTR и RTL версий
  • Серверную обработку направления текста