What is RTL (Right-to-Left) Support?

RTL support is the ability of a storefront to render correctly for languages that flow from right to left, such as Arabic, Hebrew, Persian, and Urdu. It is far more than mirroring the layout: it touches typography, iconography, animations, form behavior, and even how product images are cropped.

Definition

RTL support starts with the HTML dir="rtl" attribute, complemented by CSS logical properties (margin-inline-start instead of margin-left) and a design system that ships LTR and RTL variants of directional components. Numbers, currencies, and Latin product names remain LTR inside an RTL paragraph, producing bidirectional text that the browser handles via the Unicode Bidi algorithm — but only if the markup uses correct directional isolates. Iconography that implies direction (arrows, progress bars, carousels) must be mirrored, while logos and brand-mark icons stay untouched.

Why it matters

MEA and parts of Central Asia represent fast-growing ecommerce markets where RTL is not a niche but the default. A storefront that ships a half-mirrored layout — text flipped, but the cart drawer still sliding in from the right — feels broken and erodes trust within seconds. Beyond aesthetics, RTL affects checkout completion: misaligned form labels, address fields in the wrong order, or LTR phone-number patterns are real drop-off causes. In a Composable-Commerce stack with a single design system, RTL support also future-proofs the platform: adding ar-SA or he-IL becomes a configuration change rather than a rebuild.

Use cases

A fashion retailer expanding into ar-AE configures its design system to switch directional tokens at the root, so spacing, alignment, and component variants flip automatically. A marketplace uses CMS locale fields to provide RTL-friendly hero imagery and ensures Arabic product copy uses typographically appropriate fonts with proper kerning. A subscription brand combines RTL with Locale Routing so /ar/ae/ paths trigger both Arabic content and the RTL stylesheet, while the underlying Storefront API stays direction-agnostic. RTL also interacts with Edge-Personalization: experiments and banners must be authored with logical sides in mind, not hardcoded "left" or "right".

Related

Explore Multi-Brand and Multi-Market.