Qu'est-ce que la prise en charge RTL (droite à gauche) ?

La prise en charge RTL est la capacité d'une boutique à s'afficher correctement pour les langues qui se lisent de droite à gauche, comme l'arabe, l'hébreu, le persan et l'ourdou. C'est bien plus que la mise en miroir de la mise en page : elle touche la typographie, l'iconographie, les animations, le comportement des formulaires et même la façon dont les images produit sont recadrées.

Définition

La prise en charge RTL commence par l'attribut HTML dir="rtl", complété par les propriétés logiques CSS (margin-inline-start au lieu de margin-left) et un design system qui livre des variantes LTR et RTL des composants directionnels. Les nombres, les devises et les noms de produit en alphabet latin restent en LTR à l'intérieur d'un paragraphe RTL, produisant un texte bidirectionnel que le navigateur gère via l'algorithme Bidi d'Unicode, mais seulement si le markup utilise des isolats directionnels corrects. L'iconographie qui implique une direction (flèches, barres de progression, carrousels) doit être mise en miroir, tandis que les logos et icônes de marque restent intacts.

Pourquoi c'est important

La région MEA et certaines parties de l'Asie centrale représentent des marchés e-commerce à croissance rapide où le RTL n'est pas une niche mais la norme par défaut. Une boutique qui livre une mise en page à moitié en miroir, texte inversé mais tiroir de panier glissant toujours depuis la droite, paraît cassée et érode la confiance en quelques secondes. Au-delà de l'esthétique, le RTL affecte la finalisation du checkout : des libellés de formulaire mal alignés, des champs d'adresse dans le mauvais ordre ou des motifs de numéro de téléphone en LTR sont de réelles causes d'abandon. Dans une stack Composable-Commerce avec un design system unique, la prise en charge RTL pérennise aussi la plateforme : ajouter ar-SA ou he-IL devient un changement de configuration plutôt qu'une reconstruction.

Cas d'usage

Une enseigne de mode s'étendant en ar-AE configure son design system pour basculer les tokens directionnels à la racine, de sorte que l'espacement, l'alignement et les variantes de composants s'inversent automatiquement. Une marketplace utilise les champs de locale du CMS pour fournir une imagerie hero adaptée au RTL et veille à ce que les textes produit en arabe utilisent des polices typographiquement appropriées avec un crénage correct. Une marque par abonnement combine le RTL avec le Locale Routing pour que les chemins /ar/ae/ déclenchent à la fois le contenu arabe et la feuille de style RTL, tandis que la Storefront API sous-jacente reste agnostique à la direction. Le RTL interagit aussi avec l'Edge-Personalization : les expériences et les bannières doivent être conçues en pensant aux côtés logiques, et non en codant en dur « gauche » ou « droite ».

Voir aussi

Découvrez Multi-Brand and Multi-Market.