Arabic speakers can tell within seconds whether a website was designed for them or simply translated for them. Icons pointing the wrong way, cramped Arabic text squeezed into English layouts and numbers that jump around all give the game away. Getting right-to-left design right is not about flipping a switch; it is about a set of small, deliberate decisions.
Mirroring the layout properly
In Arabic, the reader’s eye starts at the top right, so the whole layout should mirror. Navigation moves to the right, the logo usually sits on the right, sidebars swap sides and progress bars fill from right to left. Setting dir="rtl" on the page does much of this, but only if the CSS was written with direction in mind from the start.
The single most useful habit is to use logical CSS properties such as margin-inline-start and padding-inline-end instead of left and right. They flip automatically with the text direction, which means one stylesheet serves both languages and you avoid a second, slowly diverging copy of the site that nobody wants to maintain.
Do not forget motion and imagery. Slide-in menus should open from the right, carousels should advance in the reading direction and any photography with a strong sense of movement, such as a person walking towards the text, may need an alternative crop for Arabic pages. These touches are subtle, but readers notice when they are missing.
What should not be mirrored
- Media controls — play buttons and video timelines stay left to right everywhere.
- Logos and product photos should never be flipped, and nor should anything containing Latin text.
- Clocks, charts and phone numbers keep their natural direction.
- Directional icons such as back arrows, chevrons and “next” buttons should flip.
Choosing fonts that work in both scripts
Arabic is a connected script with tall ascenders and deep descenders, so a font that looks elegant in English can look tiny or crowded in Arabic. Pair a Latin typeface with an Arabic one designed to sit alongside it, and test them together on real content rather than placeholder text.
As a rule of thumb, set Arabic body text one or two pixels larger than English and give it more line height, around 1.7 to 1.9. Avoid letter-spacing on Arabic entirely, as it breaks the joins between letters. And never use faux bold or italics; Arabic has no true italic tradition, so emphasise with weight or colour instead.
Performance matters as well. Arabic web fonts can be large, so load only the weights you actually use, subset where possible and use font-display: swap so text appears quickly. A page that flashes unstyled Arabic, or shows empty boxes for a second, undermines trust before the visitor has read a word.
The small details that make it feel native
Once the layout and type are right, the difference between good and great lies in the details. These are the issues we see most often when reviewing bilingual sites built for clients in Dubai, Riyadh and Doha, and nearly all of them are quick to fix once someone notices them.
- Numbers — decide between Western (123) and Eastern Arabic (١٢٣) digits and apply it consistently, especially in prices.
- Mixed text — brand names and English words inside Arabic sentences need proper bidi handling so punctuation does not jump.
- Forms — email, phone and IBAN fields should stay left to right even on Arabic pages.
- Dates and currency — show the Hijri calendar where expected and place AED or SAR where local readers expect it.
- Translation length — Arabic is often more compact, while some phrases run longer, so buttons need flexible widths.
Payment and checkout pages deserve extra care. Gateways such as Telr, PayFort and Checkout.com offer Arabic hosted pages, but card number fields must still read left to right, and buy-now-pay-later widgets from Tabby or Tamara should match the direction of the surrounding page. A checkout that suddenly switches language or layout is where bilingual shoppers are most likely to abandon their basket.
Translation makes a website readable in Arabic. Good RTL design makes it feel like it was written in Arabic.
SEO, content and maintenance
Give each language its own URL, such as /en/ and /ar/, and connect them with hreflang tags so Google shows the right version to the right searcher. Write Arabic meta titles and descriptions rather than leaving them in English, and research Arabic keywords separately, because people rarely search using a direct translation of English phrases.
Let visitors switch language from any page and land on the equivalent page in the other language, not the home page. Remember their choice, but avoid forcing a language based only on location: many people in the UAE and Qatar prefer English, while plenty of expatriates read Arabic comfortably. A clearly labelled toggle beats guessing every time.
Finally, make sure your content management system lets editors update both languages side by side, with a clear flag when one version is out of date. Sites that launch beautifully bilingual often drift into English-only within a year simply because publishing in Arabic was harder. Budget for professional Arabic copywriting, not just machine translation. A native editor reviewing each page before it goes live is worth the small extra cost.
The bottom line
A truly bilingual website mirrors its layout with logical CSS, pairs fonts built for both scripts, handles numbers, forms and mixed text with care, and gives each language its own SEO. Plan RTL from the first wireframe and your Arabic site will feel native, not like a mirror image of the English one.
Above all, test with native Arabic readers before launch, not just the developers who built it. Ask them to complete real tasks, such as finding a product, filling in a form and checking out, and watch where they hesitate. Those few hours of testing will catch problems no automated check ever will.
