RTL (Right-to-Left) Support

Was ist RTL (Right-to-Left) Support?

RTL Support ist die Fähigkeit einer Storefront, für Sprachen korrekt zu rendern, die von rechts nach links fließen — etwa Arabisch, Hebräisch, Persisch und Urdu. Das geht weit über das Spiegeln des Layouts hinaus: Typografie, Ikonografie, Animationen, Formularverhalten und sogar Produktbild-Croppings sind betroffen.

Definition

RTL Support beginnt mit dem HTML-Attribut dir="rtl", ergänzt um CSS Logical Properties (margin-inline-start statt margin-left) und ein Design-System, das LTR- und RTL-Varianten direktionaler Komponenten ausliefert. Zahlen, Währungen und lateinische Produktnamen bleiben innerhalb eines RTL-Absatzes LTR — das ergibt bidirektionalen Text, den der Browser über den Unicode-Bidi-Algorithmus handhabt, aber nur wenn das Markup direktionale Isolates korrekt setzt. Direktionale Icons (Pfeile, Progress Bars, Carousels) werden gespiegelt, während Logos und Brand-Marks unangetastet bleiben.

Warum es zählt

MEA und Teile Zentralasiens sind schnell wachsende E-Commerce-Märkte, in denen RTL keine Nische, sondern Standard ist. Eine Storefront, die ein halbgespiegeltes Layout ausliefert — Text gespiegelt, aber das Cart-Drawer fährt weiterhin von rechts ein — wirkt kaputt und verliert binnen Sekunden Vertrauen. Über Ästhetik hinaus beeinflusst RTL die Checkout-Completion: fehljustierte Labels, Adressfelder in falscher Reihenfolge oder LTR-Telefonnummernmuster sind reale Drop-off-Treiber. In einem Composable-Commerce-Stack mit einem einzigen Design-System macht RTL Support die Plattform zukunftssicher: ar-SA oder he-IL hinzuzufügen wird zur Konfigurationsänderung statt zum Rebuild.

Anwendungsfälle

Ein Fashion-Retailer, der in ar-AE expandiert, konfiguriert sein Design-System so, dass direktionale Tokens am Root umschalten und Spacing, Alignment und Komponentenvarianten automatisch flippen. Ein Marktplatz nutzt CMS-Locale-Felder, um RTL-freundliche Hero-Bilder bereitzustellen, und sorgt für arabische Copy in typografisch passenden Fonts mit korrektem Kerning. Eine Subscription-Marke kombiniert RTL mit Locale Routing, sodass /ar/ae/-Pfade sowohl arabischen Content als auch das RTL-Stylesheet aktivieren, während die Storefront-API direction-agnostic bleibt. RTL interagiert außerdem mit Edge-Personalization: Experimente und Banner müssen mit logischen Seiten gedacht werden, nicht mit hartcodiertem "left" oder "right".

Verwandt

Mehr dazu: Multi-Brand and Multi-Market.

Frontend Insights

SEO / GEO / AEO Ready
Performance & Core Web Vitals
WCAG 3.0 Ready
Tracking & Analytics
Brand Consistency