Arabic Website Design: What Actually Changes in RTL

Arabic website design is a layout problem, not a translation problem. Reading order, navigation, form alignment and directional icons all mirror. Numbers, logos, media controls and charts with a time axis do not. Most Arabic sites that feel subtly wrong were built by translating the copy and setting dir="rtl", then shipping whatever the browser produced. This guide covers what actually has to change.

Why is Arabic web design so often done badly?

Because the web's defaults were built left-to-right, and the shortcut looks like it works. W3Techs data from August 2026 puts Arabic at just 0.6% of all websites whose content language is known — a tiny share of the web for a language with hundreds of millions of speakers. The consequence is that most design systems, component libraries and templates were never seriously tested in RTL, so their bugs surface on your project rather than in their repository.

What mirrors and what does not?

The rule is that anything encoding reading direction should mirror, and anything encoding physical reality or brand identity should not. This table is the one I keep coming back to.

Element	Mirror in RTL?	Why
Page layout, columns, sidebars	Yes	Reading starts at the right edge, so visual hierarchy starts there too.
Navigation order	Yes	The first menu item belongs on the right.
Form labels and input alignment	Yes	Text alignment follows the language, including placeholders and validation.
Back / forward / next arrows	Yes	"Next" points left in Arabic. A right-pointing next arrow reads as going backwards.
Numbers and digits	No	Numerals run left-to-right even inside Arabic text.
Phone numbers, dates, prices, code	No	Same reason — they are LTR sequences embedded in RTL content.
Logos and Latin brand names	No	Brand marks are identity, not direction. Mirroring one damages it.
Media player controls	No	Play, rewind and progress map to physical tape convention, not reading order.
Charts with a time axis	No	Time convention is near-universally left-to-right. Mirroring inverts the meaning.
Checkmarks, spinners, non-directional icons	No	They carry no direction to flip.

Where do Arabic layouts usually break?

Five places, almost every time. None are exotic; they are just invisible until someone reads the page in Arabic.

• Typography and line height. Arabic script has taller ascenders and descenders and no capital letters. Line heights tuned for Latin type feel cramped, and a font stack without a real Arabic face falls back to something ugly. Pick the Arabic typeface deliberately; do not let the browser choose.
• Text expansion. Arabic often runs shorter than English but sets taller. Buttons and nav items sized to a fixed pixel width in English will look sparse or wrap awkwardly. Size to content, not to a magic number.
• Mixed-direction strings. "Book a call at +971 4 123 4567" contains an LTR run inside RTL text. Without correct markup the punctuation lands on the wrong side. This is the single most common visible bug on Arabic sites.
• Hardcoded spacing. Any margin-left or padding-left in the stylesheet survives the direction flip and pushes things the wrong way. Logical properties — margin-inline-start — flip automatically and are the fix.
• Icons that only look neutral. Speech bubbles with a tail, pencils, send arrows, undo curves and shopping carts all carry direction. Each needs a judgement call, not a global mirror.

"You cannot QA an Arabic site in English. Every layout bug I have shipped in RTL was invisible until an Arabic reader looked at it and said the sentence starts in the wrong place."

— Shaheer Malik, product designer and Framer developer

Should you build bilingual or Arabic-only?

Build bilingual if your audience is commercial and Gulf-based, and Arabic-only if you are speaking to consumers in a single market. Most Gulf businesses need both, because their buyers switch languages by context — English for procurement documents, Arabic for everything else. Bilingual costs more than one language and less than two sites, because the structure is shared and only the direction-sensitive layer changes.

If you go bilingual, decide up front how a visitor switches languages and what happens to their place on the page. A language toggle that dumps everyone back on the homepage is the fastest way to lose a reader who was halfway through your pricing.

What does an Arabic site cost to build?

Expect a modest premium over a single-language build rather than a doubling — the extra work is layout and typography, not a second design. What genuinely adds cost is retrofitting: taking a finished English site and forcing it into RTL is consistently more expensive than designing both directions from the start, because every hardcoded spacing decision has to be found and undone.

I build Arabic and RTL websites as a structural decision from the first layout. To be clear about the division of labour: you supply the Arabic copy, or your translator does. I handle the structure, typography and hierarchy that make it read correctly — I do not write Arabic, and anyone who tells you their designer will is describing a translation service, not a design one.

What to do next

Open your current site, switch it to Arabic, and read the first screen out loud from the right. If your eye lands anywhere other than the top-right, the layout is fighting the language. That single test finds most of what is wrong, and the fundamentals of good web design apply identically in both directions once the structure is right. If you want a second pair of eyes on it, send me the URL.