При оптимизации сайта на арабском, столкнулся с важной особенностью RTL-языков (арабский, иврит): "проблема двунаправленного текста" (BiDi). Она возникает, когда LTR и RTL текст смешиваются, особенно рядом с нейтральными символами (пробелы, точка, запятая, :, -, /). Особый гемор это <title>.
Браузер не понимает, к какой части (LTR или RTL) относится нейтральный символ, и пытается "угадать", часто ломая порядок слов.
Для этого был придуман костыль: не давать браузеру угадывать, а явно указать направление для "проблемных" фрагментов.
1. Внутри <body>
Метод 1: Атрибут dir
Оборачиваем текст в <span> (или другой тег) и указываем направление:
- dir="ltr" — слева направо
- dir="rtl" — справа налево
- dir="auto" — браузер определяет сам
Пример:
<p>
<span dir="rtl">هذا نص عربي</span>
<span dir="ltr"> (English Text)</span>
</p>
Метод 2: Тег <bdi>
Тег создан специально для этого. Он работает как <span dir="auto">, автоматически изолируя контент. Идеален для динамической вставки (например, имен пользователей).
Пример:
<p>
<bdi>المنتج الجديد</bdi> - <bdi>New Product</bdi>
</p>
2. Решение для <title>, атрибутов alt и т.д.
Здесь мы не можем использовать HTML-теги, поэтому были придуманы специальные невидимые Unicode символы. Они оборачивают фрагмент текста, чтобы изолировать его направление.
-
⁦ (LRI) + ⁩ (PDI) — Изоляция LTR (слева направо).-
⁧ (RLI) + ⁩ (PDI) — Изоляция RTL (справа налево).Пример для <title>:
<title>الأخبار ⁦World News⁩ اليوم</title>
Подробнее в посте от W3: https://www.w3.org/International/articles/inline-bidi-markup/