UX Arabskiego Menu RTL: Lustrzany Layout, Kierunek Cyfr i Etykiety Cen

Turecka restauracja w Dubai City Walk wprowadziła arabskie menu w zeszłym miesiącu. Pierwsza skarga przyszła w ciągu godzin: "Adana Kebap 45 AED" wyświetlało się jako nieczytelny bałagan. Problem nie tkwił w tłumaczeniu lecz w zarządzaniu osadzonymi cyframi łacińskimi w przepływie RTL. Ten przewodnik obejmuje lustrzany layout, kierunek etykiety ceny i zachowanie line-clamp w wielowierszowych opisach arabskich na rzeczywistych przykładach produkcyjnych.

Lustro i kierunek ceny

Z dir="rtl" na korzeniu HTML, Flex i Grid odbijają się automatycznie. Nazwa produktu po prawej, cena po lewej — czego oczekują arabscy czytelnicy. Dla "45 AED" algorytm Unicode BiDi obsługuje poprawnie: cyfra LTR, kontekst RTL.

Kłopoty zaczynają się w opisach jak "gotowe w 5 minut" gdzie cyfra i znaki arabskie się mieszają. Przy zawijaniu cyfra skacze na złą stronę. Rozwiązanie: zastosować unicode-bidi: plaintext na elemencie opisu.

Line-clamp i wielowierszowe zawijanie

Karty zwykle ograniczają do 2-3 linii. W łacinie bez problemu, w arabskim ostatnia linia często znika lub cyfry skaczą. Powód: line-clamp najpierw tnie, BiDi potem przestawia.

• unicode-bidi: plaintext — każda linia w swoim kierunku
• text-align: start — wyrównanie według locale
• word-break: normal — zachowuje ligatury arabskie

Cyfry i waluty

Saudyjskie menu pokazują "45 ر.س"; ZEA preferują "AED 45". W konfiguracji locale pozycja jest pod currency.position. Wschodnioarabskie cyfry (٠١٢٣٤٥٦٧٨٩) podobają się starszej publiczności ale Zatoka używa cyfr łacińskich.

thMenu używa Intl.NumberFormat z numberingSystem: "latn" domyślnie, z override "arab" dla Egiptu i Lewantu.

FAQ

Czy dir="rtl" wystarczy? Nie, mieszane karty wymagają unicode-bidi: plaintext.

Cyfry arabskie obowiązkowe? Nie, tylko Egipt/Lewant.

Odbijać logo? Marek nie, kierunkowe ikony tak.

Czy to było pomocne? Udostępnij.