Arabic & RTL website development: a developer's guide
Building bilingual English–Arabic websites that feel native in both — the engineering side of right-to-left, fonts, and content modelling.
Building a bilingual English–Arabic website is far more than translating text. Done well, both languages feel native; done badly, the Arabic feels like an afterthought. This is the engineering side of getting it right. For the search side, see Arabic–English multilingual SEO in the GCC.
RTL is more than flipping the page
Right-to-left changes layout, not just text direction. The reliable way to build it is with logical CSS, so the whole interface mirrors automatically:
- Use logical properties (margin-inline, padding-inline, inset-inline) — never hard-coded left/right.
- Mirror layouts, navigation, icons and directional arrows.
- Handle bidirectional text where English and Arabic mix (brands, numbers, URLs).
- Get numerals, dates and currency formatting right for each locale.
Typography for Arabic
Arabic needs its own type treatment: a quality Arabic typeface, more generous line-height, and a font pairing that balances the English and Arabic weights so neither looks secondary.
Model content for two languages
The cleanest approach is field-level internationalisation: one document per piece of content with English and Arabic fields side by side — not two separate websites to keep in sync. It's how we model content in Sanity, and it keeps both languages in lockstep.
Common pitfalls
- Hard-coded left/right spacing that breaks in RTL.
- Untranslated interface strings (buttons, errors, forms).
- Broken bidi in mixed English/Arabic sentences.
- Wrong font fallback for Arabic glyphs.
- Forgetting RTL in emails, PDFs and OG images.
How we build bilingual sites
We build English/Arabic in at the content model and use logical CSS so the site mirrors cleanly, with RTL treated as first-class from day one. See our web development and UX design work.
Do I need two separate websites for Arabic and English?
No. The best approach is one bilingual website with field-level internationalisation — each piece of content holds both an English and an Arabic version — so the two never drift out of sync and you maintain a single codebase.
Is right-to-left (RTL) hard to build?
Not if it's planned from the start. Building with logical CSS properties (instead of hard-coded left/right) lets the entire layout mirror automatically. Retrofitting RTL onto a left-to-right-only build is where it gets painful.
What about Arabic SEO?
Arabic SEO needs proper hreflang, localised metadata and Arabic keyword research — a different discipline from the build itself. We cover it in our guide to Arabic–English multilingual SEO in the GCC.