Arabic RTL Website Design: 12 Mistakes That Make Your Site Look Translated
Most Arabic sites feel translated because the English layout was simply flipped. Here are the 12 RTL mistakes we see most — in layout, typography, numbers and forms — and how to fix them.
Most Arabic websites that "feel translated" fail for the same reason: the English layout was flipped right-to-left and the Arabic text was dropped in, without designing for how Arabic is actually read. Real RTL design means deciding what should mirror and what should not, treating Arabic typography on its own terms, and handling numbers, forms and mixed-language text deliberately.
Below are the twelve mistakes we see most often when auditing Arabic and bilingual sites for clients in Saudi Arabia, the Gulf and Egypt — and how to fix each one.
Layout and direction
1. Mirroring everything. Directional elements should flip — back and forward arrows, progress steps, breadcrumbs, sliders. Non-directional ones should not — play buttons, checkmarks, clocks, logos, and media controls. Flipping a play icon or a brand logo is an instant tell.
2. Setting direction with hard-coded left and right. Using physical CSS (margin-left, padding-right, text-align: left) means every RTL page needs manual overrides that eventually drift. Use logical properties — margin-inline-start, padding-inline-end, text-align: start — so one stylesheet works in both directions.
3. Forgetting the lang and dir attributes. The page should declare lang="ar" and dir="rtl" on the html element. Screen readers, browsers and search engines all rely on it, and it is the foundation for correct hreflang between your Arabic and English versions.
4. Carousels and timelines that run the wrong way. In Arabic, "next" moves to the left and time flows right to left. A carousel that still swipes left-to-right, or a roadmap that reads backwards, breaks the reader's mental model.
Typography
5. Using a Latin font's Arabic fallback. Many brand fonts have no Arabic glyphs, so the browser falls back to a default system font that clashes with everything else. Choose a proper Arabic typeface and pair it deliberately with your Latin one so both feel like one family.
6. Copying English line-height and sizes. Arabic letterforms have taller ascenders and deeper descenders and need more line-height. Arabic at the same pixel size as English often looks smaller, so it usually needs a slightly larger size too.
7. Adding letter-spacing. Arabic is a connected script. Letter-spacing breaks the joins between letters and makes words look broken. Keep tracking at zero for Arabic, even where your English headings are tightened or widened.
8. Relying on italics and uppercase. Arabic has no capital letters and no true italic. Emphasis built on text-transform: uppercase or italic simply disappears. Use weight or colour for emphasis instead.
Numbers, forms and mixed text
9. Mangled phone numbers, prices and codes. Phone numbers, order IDs, emails and URLs are left-to-right even inside Arabic text. Without isolating them, "+966 5x xxx xxxx" can render out of order. Wrap them so they keep their own direction.
10. Inconsistent digits. Pick either Western digits (123) or Arabic-Indic digits (١٢٣) and use them consistently across prices, dates and tables. Mixing both on one screen looks careless — and in fintech or e-commerce it damages trust.
11. Form fields that fight the user. Email, phone and URL fields should accept left-to-right input even on an Arabic page, while name and address fields stay right-to-left. Error messages, placeholders and validation must be written in Arabic too, not left in English.
12. Translating instead of writing. Machine-translated copy reads as foreign to Gulf users, and English-length layouts do not suit Arabic phrasing. Arabic copy should be written — or at least edited — by a native writer, and the layout checked with the real text, not placeholder.
A quick RTL checklist
| Check | Pass looks like |
|---|---|
| Direction attributes | html has lang="ar" and dir="rtl" |
| CSS | Logical properties, no hard-coded left/right |
| Icons | Directional icons mirrored, others untouched |
| Font | Dedicated Arabic typeface, zero letter-spacing |
| Numbers | One digit style, LTR runs isolated |
| Forms | Email and phone fields LTR, messages in Arabic |
| SEO | hreflang links Arabic and English versions |
| Content | Written or edited by a native Arabic writer |
Why it matters
Gulf customers decide whether a brand is serious in the first few seconds. An Arabic site that reads like a translation tells them the business is not really built for them.
Getting RTL right is rarely about adding budget — it is about deciding it at the design stage. Retrofitting RTL into a finished English site costs far more than designing both directions together from day one.
Frequently asked questions
Can I just use a plugin to make my site RTL?
A plugin or theme option can flip the layout, but it cannot choose your Arabic typeface, fix mirrored icons, or write natural Arabic copy. It is a starting point, not a finished Arabic experience.
Should the Arabic version be on a separate domain?
Usually no. Most businesses do best with language folders on one domain, such as /ar and /en, linked with hreflang so search engines show the right version to each user.
Which digits should a Saudi website use?
Both are understood in Saudi Arabia, and many major brands use Western digits for prices and data. What matters most is consistency across the whole site.
Build Arabic that feels native
Flowlix designs and builds bilingual Arabic and English websites and apps with RTL treated as part of the design system, not an afterthought. Book a free consultation on WhatsApp and we'll review your current Arabic experience or scope a new build. Flowlix is a product design and development studio in Ismailia, Egypt, serving clients across Egypt, Saudi Arabia and the Gulf — one team for design and development, with AI in our workflow.