UX Menu Arabo RTL: Layout Specchio, Direzione Numeri ed Etichette Prezzo

Un ristorante turco a Dubai City Walk ha lanciato il menu arabo il mese scorso. Il primo reclamo è arrivato in poche ore: "Adana Kebap 45 AED" appariva come un groviglio illeggibile. Il problema non era la traduzione ma gestire cifre latine integrate in un flusso RTL. Questa guida copre layout specchio, direzione del prezzo e comportamento del line-clamp in descrizioni arabe multiriga con esempi reali di produzione.

Specchio e direzione del prezzo

Con dir="rtl" sulla radice HTML, Flex e Grid si specchiano automaticamente. Nome prodotto a destra, prezzo a sinistra — ciò che gli arabofoni si aspettano. Per "45 AED" l'algoritmo Unicode BiDi gestisce bene: numero LTR, contesto RTL.

I guai iniziano in descrizioni come "pronto in 5 minuti" dove cifre e glifi arabi si mischiano. Al ritorno a capo la cifra finisce dal lato sbagliato. Soluzione: unicode-bidi: plaintext sull'elemento descrizione.

Line-clamp e wrapping multilinea

Le card limitano a 2-3 righe. In latino nessun problema, in arabo l'ultima riga sparisce o i numeri saltano. Motivo: line-clamp taglia prima, BiDi riordina dopo.

• unicode-bidi: plaintext — ogni riga nella sua direzione
• text-align: start — allineamento per locale
• word-break: normal — preserva legature arabe

Numeri e valute

Menu sauditi mostrano "45 ر.س"; gli Emirati preferiscono "AED 45". Nella config locale la posizione è in currency.position. Le cifre arabe orientali (٠١٢٣٤٥٦٧٨٩) sono apprezzate dal pubblico più anziano ma il Golfo usa cifre latine.

thMenu usa Intl.NumberFormat con numberingSystem: "latn" default, override "arab" per Egitto e Levante dove restano comuni.

FAQ

Basta dir="rtl"? No, le card miste richiedono unicode-bidi: plaintext.

Cifre arabe obbligatorie? No, solo per Egitto/Levante.

Specchiare i loghi? No quelli di marca, sì icone direzionali.

Ti è stato utile? Condividilo.