RTL в HTML: направление текста и проверка интерфейса

RTL означает направление письма справа налево. Оно нужно, например, для арабского и иврита. Смешанные строки с числами и латиницей обрабатываются алгоритмом Unicode BiDi: переворачивать строку вручную нельзя.

Язык и направление

lang сообщает язык содержимого, а dir задаёт базовое направление. Одно не заменяет другое. Для страницы на арабском направление указывают на корневом html; для отдельного фрагмента — на его элементе.

<p lang="ar" dir="rtl">مرحبا بالعالم</p>
<p dir="auto">Текст, полученный от пользователя</p>

dir=auto подходит для текста, направление которого заранее неизвестно. Для известного направления используйте rtl или ltr. Это семантическое свойство содержимого, поэтому HTML-атрибут предпочтительнее случайного CSS direction только ради внешнего вида.

Компоновка

.message {
  margin-inline-start: 1rem;
  padding-inline-end: 0.5rem;
}

Логические свойства зависят от направления и позволяют не привязывать отступы к left/right. Не зеркальте все изображения и значки: логотип, фотография и отдельные обозначения могут требовать исходной ориентации.

Проверка многоязычного экрана

1. Проверьте короткую и длинную строку, числа, даты, скобки и латинское имя внутри RTL-текста.
2. Проверьте подписи и ошибки полей, таблицы и навигацию.
3. Пройдите элементы клавиатурой: визуальное расположение не должно запутывать порядок фокуса.
4. Убедитесь, что текст остаётся правильным при отключении CSS и при увеличении шрифта.

Для вставки независимого фрагмента неизвестного направления рассмотрите bdi; направление основного документа и изоляция отдельного фрагмента решают разные задачи.