UX Arabisk Meny RTL: Spegel-Layout, Sifferriktning och Prisetiketter

En turkisk restaurang i Dubai City Walk lanserade sin arabiska meny förra månaden. Det första klagomålet kom inom timmar: "Adana Kebap 45 AED" visades som ett oläsligt virrvarr. Problemet var inte översättning, utan hantering av inbäddade latinska siffror i ett RTL-flöde. Denna guide täcker spegel-layout, prisetikett-riktning och line-clamp-beteende i flerradiga arabiska beskrivningar med verkliga produktionsexempel.

Spegel och prisriktning

Med dir="rtl" på HTML-roten speglas Flex och Grid automatiskt. Produktnamn till höger, pris till vänster — som arabiska läsare förväntar sig. För "45 AED" hanterar Unicode BiDi-algoritmen korrekt: siffra LTR, kontext RTL.

Problem börjar i beskrivningar som "klar på 5 minuter" där siffra och arabiska glyfer blandas. Vid radbrytning hoppar siffran till fel sida. Lösning: tillämpa unicode-bidi: plaintext på beskrivningselementet.

Line-clamp och flerlinje-radbrytning

Kort begränsar vanligtvis till 2-3 rader. I latin inga problem, i arabiska försvinner sista raden ofta eller siffror hoppar. Anledning: line-clamp klipper först, BiDi omordnar efteråt.

• unicode-bidi: plaintext — varje rad i sin riktning
• text-align: start — locale-justering
• word-break: normal — bevarar arabiska ligaturer

Siffror och valutor

Saudiska menyer visar "45 ر.س"; UAE föredrar "AED 45". I locale-konfigurationen ligger position under currency.position. Östarabiska siffror (٠١٢٣٤٥٦٧٨٩) tilltalar äldre publik men Gulfen använder latinska.

thMenu använder Intl.NumberFormat med numberingSystem: "latn" som default och override "arab" för Egypten och Levanten.

FAQ

Räcker dir="rtl"? Nej, blandade kort behöver unicode-bidi: plaintext.

Är arabiska siffror obligatoriska? Nej, bara för Egypten/Levanten.

Spegla logotyper? Varumärken nej, riktningsikoner ja.

Var detta hjälpsamt? Dela det.