Most teams discover too late that supporting Arabic is not a translation task — it's an architecture task. Setting dir="rtl" flips the page, but it also exposes every hard-coded 'left' and 'right' in your stylesheet, every icon that now points the wrong way, and every layout that assumed text flows in one direction. Done as an afterthought, it's a painful retrofit. Done from the start, it's nearly free.
The foundation is logical CSS. Instead of margin-left and padding-right, we use margin-inline-start and padding-inline-end — properties that automatically mirror with the writing direction. One stylesheet then serves both languages correctly, with no per-language overrides to maintain. This single discipline removes the majority of RTL bugs before they exist.
Then comes mirroring, which is more nuanced than 'flip everything'. Directional icons — back arrows, chevrons, send buttons — must flip. But logos, media controls, charts that encode real-world direction, phone numbers, and code snippets must not. We keep an explicit list of what mirrors and what stays fixed, because getting this wrong is exactly what makes a translated app feel foreign to a native reader.
Typography is where many Arabic builds quietly fail. Arabic script is taller and more connected than Latin, so line-heights that look balanced in English feel cramped in Arabic. Letters change shape by position, diacritics sit above and below, and the right font is the difference between 'professional' and 'machine-translated'. We pair a proper Arabic typeface with tuned line-height and size rather than forcing one set of values onto both.
Bidirectional text — Arabic sentences with embedded English words, numbers, or URLs — is the subtlest trap. Without care, a price, a percentage, or a brand name can render in the wrong order or jump to the wrong side of a sentence. We isolate these runs explicitly so '24/7' and 'DevSparks' always read the way they should, in the middle of Arabic copy.
Localization is not translation. A faithful word-for-word translation can still feel stiff, because tone, idiom, and formality differ between languages. Our Arabic copy is written to sound natural to an Arabic reader, not transposed from English — and the English is written for its audience too. The product should feel like it was born in whichever language you opened it in.
Finally, we test both directions as first-class from the first sprint, not in a panicked QA pass at the end. In a region where Arabic is the primary language, an interface that feels genuinely native — not flipped — is a real competitive edge, and it shows the moment a user lands on the page.
