UX Menu Arabe RTL : Mise en Page Miroir, Direction des Chiffres et Prix

Un restaurant turc à Dubai City Walk a lancé son menu arabe le mois dernier. La première plainte est arrivée dans les heures suivantes : "Adana Kebap 45 AED" s'affichait comme un fouillis illisible. Le souci n'était pas la traduction mais la gestion des chiffres latins intégrés dans un flux RTL. Ce guide couvre la mise en page miroir, la direction des étiquettes de prix et le comportement du line-clamp dans les descriptions arabes multilignes.

Miroir et direction des prix

Avec dir="rtl" sur la racine HTML, Flex et Grid se reflètent automatiquement. Nom du produit à droite, prix à gauche — exactement ce qu'attendent les lecteurs arabes. Pour "45 AED", l'algorithme BiDi Unicode gère correctement : chiffre LTR, contexte RTL.

Les ennuis commencent dans des descriptions comme "prêt en 5 minutes" où chiffre et glyphes arabes se mélangent. Au retour à la ligne, le chiffre saute du mauvais côté. La correction : appliquer unicode-bidi: plaintext à l'élément de description.

Line-clamp et retour multiligne

La plupart des cartes limitent à 2-3 lignes. Sans souci en latin, mais en arabe la dernière ligne disparaît souvent ou les chiffres sautent. La raison : line-clamp coupe d'abord, BiDi réordonne ensuite.

• unicode-bidi: plaintext — garde chaque ligne dans sa direction
• text-align: start — alignement selon la locale
• word-break: normal — préserve les ligatures arabes

Chiffres et devises

Les menus saoudiens montrent "45 ر.س" ; les EAU préfèrent "AED 45". Dans la config locale, la position est sous currency.position. Les chiffres arabes orientaux (٠١٢٣٤٥٦٧٨٩) parlent aux audiences plus âgées mais le Golfe utilise majoritairement les chiffres latins.

thMenu emploie Intl.NumberFormat avec numberingSystem: "latn" par défaut, avec override "arab" pour l'Égypte et le Levant.

FAQ

dir="rtl" suffit-il ? Non, les cartes mixtes nécessitent unicode-bidi: plaintext.

Chiffres arabes obligatoires ? Non, seulement pour Égypte/Levant.

Refléter les logos ? Non pour les logos de marque, oui pour les icônes directionnelles.

Cet article vous a été utile ? Partagez-le.