UX Арабского Меню RTL: Зеркало, Направление Цифр и Этикетки Цен

Турецкий ресторан в Dubai City Walk запустил арабское меню в прошлом месяце. Первая жалоба пришла в течение часов: "Adana Kebap 45 AED" отображалось как нечитаемая мешанина. Проблема была не в переводе, а в управлении латинскими цифрами внутри RTL-потока. Это руководство покрывает зеркальный макет, направление ценника и поведение line-clamp в многострочных арабских описаниях на реальных примерах.

Зеркало и направление цены

С dir="rtl" на HTML-корне Flex и Grid зеркалятся автоматически. Название справа, цена слева — что ожидают арабские читатели. Для "45 AED" алгоритм BiDi Unicode справляется правильно: цифра LTR, контекст RTL.

Проблемы начинаются в описаниях вроде "готово за 5 минут", где цифра и арабские глифы смешиваются. При переносе цифра прыгает не туда. Решение: unicode-bidi: plaintext на элементе описания.

Line-clamp и многострочный перенос

Карточки обычно ограничивают 2-3 строки. В латинице без проблем, в арабском последняя строка часто исчезает или цифры прыгают. Причина: line-clamp обрезает первым, BiDi переупорядочивает после.

• unicode-bidi: plaintext — каждая строка в своём направлении
• text-align: start — выравнивание по locale
• word-break: normal — сохраняет арабские лигатуры

Цифры и валюты

Саудовские меню показывают "45 ر.س"; ОАЭ — "AED 45". В конфиге локали позиция в currency.position. Восточно-арабские цифры (٠١٢٣٤٥٦٧٨٩) нравятся старшей аудитории, но Залив использует латинские.

thMenu использует Intl.NumberFormat с numberingSystem: "latn" по умолчанию, с переключением на "arab" для Египта и Леванта.

FAQ

Хватит ли dir="rtl"? Нет, смешанные карточки требуют unicode-bidi: plaintext.

Арабские цифры обязательны? Нет, только для Египта/Леванта.

Зеркалить логотипы? Нет брендовые, да направленные иконки.

Было полезно? Поделитесь.