RTL Arabische Menu UX: Spiegel-Layout, Cijferrichting en Prijslabels

Een Turks restaurant in Dubai City Walk lanceerde vorige maand zijn Arabische menu. De eerste klacht arriveerde binnen uren: "Adana Kebap 45 AED" werd weergegeven als een onleesbare wirwar. Het probleem was geen vertaling maar het beheer van ingebedde Latijnse cijfers binnen een RTL-stroom. Deze gids behandelt spiegel-layout, prijslabel-richting en line-clamp-gedrag in meertalige Arabische beschrijvingen met echte productievoorbeelden.

Spiegel en prijsrichting

Met dir="rtl" op de HTML-root spiegelen Flex en Grid automatisch. Productnaam rechts, prijs links — wat Arabische lezers verwachten. Voor "45 AED" behandelt het Unicode BiDi-algoritme correct: cijfer LTR, context RTL.

Problemen beginnen in beschrijvingen zoals "klaar in 5 minuten" waar cijfers en Arabische glyphs mengen. Bij regelafbreking springt het cijfer naar de verkeerde kant. Oplossing: unicode-bidi: plaintext toepassen op het beschrijvingselement.

Line-clamp en meerregelig wikkelen

Kaarten beperken meestal tot 2-3 regels. In Latijn geen probleem, in Arabisch verdwijnt de laatste regel of springen cijfers. Reden: line-clamp knipt eerst, BiDi herrangschikt daarna.

• unicode-bidi: plaintext — elke regel in eigen richting
• text-align: start — locale-uitlijning
• word-break: normal — behoudt Arabische ligaturen

Cijfers en valuta

Saudische menu's tonen "45 ر.س"; UAE prefereert "AED 45". In locale-config staat positie onder currency.position. Oost-Arabische cijfers (٠١٢٣٤٥٦٧٨٩) spreken oudere doelgroepen aan maar de Golf gebruikt Latijnse cijfers.

thMenu gebruikt Intl.NumberFormat met numberingSystem: "latn" als default, override "arab" voor Egypte en de Levant.

FAQ

Is dir="rtl" genoeg? Nee, gemengde kaarten hebben unicode-bidi: plaintext nodig.

Arabische cijfers verplicht? Nee, alleen voor Egypte/Levant.

Logo's spiegelen? Merken nee, directionele iconen ja.

Was dit nuttig? Deel het.