Наполнитель · арабскийАрабский Lorem Ipsum
Арабский наполнитель и зеркальный интерфейс: видно, как разворачивается раскладка, куда уезжают иконки и что происходит с числами внутри арабского текста. Всё считается в браузере.
Генератор
Зеркальный интерфейс
Переключите направление и посмотрите, что сдвинулось. Разворачивается не текст, а вся раскладка: колонки, отступы, иконки и направленные стрелки. Часы и логотипы при этом зеркалить нельзя.
Стрелка «далее» перевернулась вместе с раскладкой, а часы и цена остались как были: у направленных иконок зеркалить есть что, у ненаправленных — нечего. Число 2026 и латинский артикул внутри арабской строки сохраняют направление слева направо — это двунаправленность, и наивная обрезка по числу знаков разрушает такое предложение.
Строки худшего случая
Случаи, на которых арабская вёрстка ломается первой.Что ломается
Разворачивается раскладка, а не текст
Меняются местами колонки, отступы, положение иконок, направление стрелок и прогресс-баров. `margin-left` вместо логического `margin-inline-start` — самая частая причина того, что интерфейс в RTL разъезжается: свойство продолжает отсчитывать слева, когда всё остальное считает справа.
Буквы меняют форму по позиции в слове
У одной буквы четыре начертания: изолированное, начальное, срединное и конечное. Если шрифт или движок не поддерживает соединение, текст распадается на отдельные знаки и становится нечитаемым — при этом сами символы верные, и код-ревью такую ошибку не поймает. Видно только на отрисовке.
Двунаправленный текст ломает обрезку
Числа, латиница и часть знаков препинания внутри арабского предложения сохраняют направление слева направо. Порядок отображения перестаёт совпадать с порядком символов в строке, и обрезка «первые N знаков» режет не там, где кажется. Проверять надо на ценах, датах и названиях брендов.
Высоты строки не хватает
Арабское письмо использует пространство над и под базовой линией активнее латиницы. Межстрочный интервал, комфортный для английского, приводит к столкновению диакритики. Закладывать нужно на 25–35 % больше, а если в дизайн-системе `line-height` задан фиксированным числом пикселей — заводить для арабского отдельный токен.
Зеркалить нужно не всё
Стрелки «вперёд» и «назад», отступы списка и индикаторы прогресса переворачиваются. Часы, кнопки воспроизведения, логотипы и галочки — нет. Автоматическое отражение всей иконографии дешевле в реализации и читается носителем как явный дефект.
Нет верхнего и нижнего регистра
Приёмы вроде капслока для акцента и `text-transform: uppercase` не работают вовсе — регистра в арабском не существует. Выделять приходится начертанием, цветом или размером, и если в дизайн-системе акцент построен на капсе, для арабского нужен другой способ.
Шрифты
Noto Naskh Arabic и Noto Sans Arabic дают полное покрытие, Cairo и Tajawal — современный интерфейсный вид, Amiri — классическую наборную традицию. Системные латинские гарнитуры арабский не покрывают вовсе: без явного объявления шрифта браузер подставит резервный с другими метриками, и расчёты высоты строки перестанут сходиться.