UX Arabisk Menu RTL: Spejl-Layout, Talretning og Prisetiketter

En tyrkisk restaurant i Dubai City Walk lancerede sin arabiske menu sidste måned. Den første klage kom inden for timer: "Adana Kebap 45 AED" blev vist som et ulæseligt rod. Problemet var ikke oversættelse, men håndtering af indlejrede latinske cifre i et RTL-flow. Denne guide dækker spejl-layout, prisetiket-retning og line-clamp-adfærd i flerlinjede arabiske beskrivelser med ægte produktionseksempler.

Spejl og prisretning

Med dir="rtl" på HTML-roden spejles Flex og Grid automatisk. Produktnavn til højre, pris til venstre — som arabiske læsere forventer. For "45 AED" håndterer Unicode BiDi-algoritmen korrekt: tal LTR, kontekst RTL.

Problemer starter i beskrivelser som "klar om 5 minutter" hvor ciffer og arabiske glyffer blandes. Ved linjeskift hopper cifferet til forkert side. Løsning: anvend unicode-bidi: plaintext på beskrivelseselementet.

Line-clamp og flerlinje-ombrydning

Kort begrænser typisk til 2-3 linjer. I latinsk ingen problemer, i arabisk forsvinder sidste linje ofte eller tal hopper. Årsag: line-clamp klipper først, BiDi omorganiserer derefter.

• unicode-bidi: plaintext — hver linje i sin retning
• text-align: start — locale-justering
• word-break: normal — bevarer arabiske ligaturer

Tal og valutaer

Saudiske menuer viser "45 ر.س"; UAE foretrækker "AED 45". I locale-config ligger position under currency.position. Østarabiske cifre (٠١٢٣٤٥٦٧٨٩) appellerer til ældre publikum men Golfen bruger latinske.

thMenu bruger Intl.NumberFormat med numberingSystem: "latn" som default og override "arab" til Egypten og Levanten.

FAQ

Er dir="rtl" nok? Nej, blandede kort har brug for unicode-bidi: plaintext.

Er arabiske cifre obligatoriske? Nej, kun til Egypten/Levanten.

Spejle logoer? Brand nej, retningsbestemte ikoner ja.

Var dette nyttigt? Del det.