RTL-First Design Systems for Bilingual Arabic Products
Building a bilingual Arabic/English product is not "add a translation file and flip a switch." Right-to-left (RTL) is a first-class design constraint. Treating it as an afterthought produces broken layouts, mirrored icons that point the wrong way, and mixed-direction text that confuses users.
Logical properties, not physical ones
The single most important shift: stop using margin-left/padding-right and use logical properties — margin-inline-start, padding-inline-end, inset-inline. The browser mirrors them automatically based on dir, so one stylesheet serves both directions.
What mirrors and what doesn't
- Mirror: layout flow, arrows, chevrons, progress bars, back/forward icons.
- Do NOT mirror: logos, media playback icons, numbers, phone numbers, and most brand marks.
Deciding this per element prevents the classic "mirrored play button" bug.
Bidirectional text
Arabic text with embedded English (product names, URLs) needs correct Unicode bidi handling. Isolate inline foreign runs so punctuation and parentheses don't jump to the wrong side.
Typography
Arabic and Latin have different vertical metrics and ideal line-heights. A design system should define type per script rather than forcing one line-height on both.
Test both from day one
Design and QA in RTL as the default, not as a late pass. A layout that only ever gets checked in LTR will ship RTL bugs.
We build RTL-first
This entire site — and our web & PWA service — is RTL-first using logical properties. See our Arabic-first philosophy, or start a project.
Frequently asked questions
Related articles
Automating Customer Notifications and Confirmations
Manual updates do not scale. How to automate order and booking confirmations, reminders, and status updates reliably — designed around events, not channels.
Integrating Electronic Payments Into Your Product
How to integrate electronic payments and national e-invoicing into your product: per-invoice requests, reconciliation, confirmation, and swappable providers.
Offline-First PWAs for Emerging Markets: Patterns That Work
Intermittent connectivity and metered data demand offline-first design. The core PWA patterns — app shell, local-first data, background sync — that actually work.
Your first step is one message.
Book a demo you can see this week, or tell us about your project, and we'll get back to you within one business day.