UX Arabisk Meny RTL: Speil-Layout, Tallretning og Prisetiketter

En tyrkisk restaurant i Dubai City Walk lanserte sin arabiske meny forrige måned. Den første klagen kom innen timer: "Adana Kebap 45 AED" ble vist som et uleselig rot. Problemet var ikke oversettelse, men håndtering av innebygde latinske sifre i en RTL-flyt. Denne guiden dekker speil-layout, prisetikett-retning og line-clamp-oppførsel i flerlinjede arabiske beskrivelser med ekte produksjonseksempler.

Speil og prisretning

Med dir="rtl" på HTML-roten speiles Flex og Grid automatisk. Produktnavn til høyre, pris til venstre — som arabiske lesere forventer. For "45 AED" håndterer Unicode BiDi-algoritmen korrekt: tall LTR, kontekst RTL.

Problemer starter i beskrivelser som "klar på 5 minutter" der siffer og arabiske glyffer blandes. Ved linjeskift hopper sifferet til feil side. Løsning: bruk unicode-bidi: plaintext på beskrivelseselementet.

Line-clamp og flerlinje-pakking

Kort begrenser vanligvis til 2-3 linjer. I latin ingen problemer, i arabisk forsvinner siste linje ofte eller tall hopper. Grunn: line-clamp kutter først, BiDi omorganiserer etterpå.

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

Tall og valutaer

Saudiske menyer viser "45 ر.س"; UAE foretrekker "AED 45". I locale-config ligger posisjon under currency.position. Østarabiske sifre (٠١٢٣٤٥٦٧٨٩) appellerer til eldre publikum men Gulfen bruker latinske.

thMenu bruker Intl.NumberFormat med numberingSystem: "latn" som default og override "arab" for Egypt og Levanten.

FAQ

Er dir="rtl" nok? Nei, blandede kort trenger unicode-bidi: plaintext.

Er arabiske sifre obligatoriske? Nei, bare for Egypt/Levanten.

Speile logoer? Merkevarer nei, retningsikoner ja.

Var dette nyttig? Del det.