RTL Arabisches Menü UX: Spiegel-Layout, Zahlenrichtung, Preisschilder

Ein türkisches Lokal im Dubai City Walk veröffentlichte letzten Monat seine arabische Speisekarte. Die erste Beschwerde kam sofort: "Adana Kebap 45 AED" erschien als unleserliches Durcheinander. Das Problem war keine Übersetzung — sondern die Verwaltung eingebetteter lateinischer Ziffern in einem RTL-Layout. Dieser Leitfaden zeigt Spiegelung, Preisrichtung und Line-Clamp-Verhalten in mehrzeiligen arabischen Beschreibungen anhand echter Produktionsbeispiele.

Spiegel-Layout und Preisrichtung

Setzt man dir="rtl" am HTML-Root, spiegeln Flex und Grid automatisch. Produktname rechts, Preis links — exakt was arabische Leser erwarten. Ist der Preis "45 AED" mit lateinischen Zeichen, behandelt der Unicode-BiDi-Algorithmus ihn korrekt: Zahl LTR, Kontext RTL.

Probleme entstehen in Beschreibungen wie "in 5 Minuten fertig", wo Ziffer und arabische Glyphen gemischt sind. Beim Zeilenumbruch springt die Ziffer auf die falsche Seite. Lösung: unicode-bidi: plaintext auf das Beschreibungs-Element anwenden.

Line-Clamp und Mehrzeilenumbruch

Menükarten begrenzen Beschreibungen meist auf 2-3 Zeilen. Bei lateinischem Text harmlos, im Arabischen verschwindet oft die letzte Zeile oder Zahlen springen an die falsche Kante. Grund: line-clamp kürzt zuerst, dann läuft die BiDi-Neuordnung.

• unicode-bidi: plaintext — hält jede Zeile in ihrer Richtung
• text-align: start — locale-abhängige Ausrichtung
• word-break: normal — bewahrt arabische Ligaturen

Zahlenrichtung und Währungslabels

Saudi-Menüs zeigen "45 ر.س"; die VAE bevorzugen "AED 45". In der Locale-Config liegt die Position unter currency.position. Ostarabische Ziffern (٠١٢٣٤٥٦٧٨٩) werden von älteren Zielgruppen geschätzt, im Golf jedoch sind lateinische Ziffern Standard. thMenu nutzt Intl.NumberFormat mit numberingSystem: "latn" als Default.

Für Ägypten oder Levante lässt sich "arab" als Override setzen — die Zahlen werden dann in arabisch-indischer Schreibweise dargestellt, was lokalen Lesegewohnheiten entspricht.

FAQ

Reicht dir="rtl" auf der Seite? Nein. Karten mit gemischtem Text brauchen unicode-bidi: plaintext.

Muss ich arabisch-indische Ziffern nutzen? Nein. Im Golf reichen lateinische; Override nur für Ägypten/Levante.

Sollen Icons gespiegelt werden? Markenlogos nein, Richtungsicons (Pfeile) ja — via transform: scaleX(-1).

Hilfreich? Teilen Sie es.