--- title: "Arabic Website Design: What Changes in RTL (2026)" description: "Right-to-left is a layout decision, not a text-direction toggle. What mirrors, what must not mirror, and where Arabic websites usually break." url: https://www.shaheermalik.com/blog/arabic-website-design-rtl language: en format: agent view of this page (the same content as the page, as plain text) updated: 2026-11-12 --- [← All posts](https://www.shaheermalik.com/blog) [Web Design](https://www.shaheermalik.com/blog/category/web-design) # Arabic Website Design: What Actually Changes in RTL Flipping direction to RTL is the easy part. This is what actually changes when a site goes Arabic — what mirrors, what must stay put, and the five places Arabic layouts usually break. Image: Shaheer Malik Shaheer Malik Framer Designer & Developer August 15, 2026 4 min read Quick answer Arabic website design means rebuilding the layout right-to-left, not translating the text and flipping a switch. Reading order, navigation, form alignment and icon direction all mirror. Numbers, logos, media controls, charts with a time axis and Latin brand names do not. Getting that split wrong is what makes an Arabic site feel broken. **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](https://w3techs.com/technologies/details/cl-ar-) 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. ## How should bilingual content be managed? The bilingual structure above, one shared foundation with only the direction-sensitive layer changing per language, depends entirely on how content is modeled at the source. Sanity, a Content Operating System, treats Arabic and English as parallel localized fields on the same document rather than as two translated copies of a page. In practice that means defining the schema once in code, with each translatable field marked per locale, and letting the Studio present editors with side-by-side Arabic and English inputs on the same record. GROQ queries pull the right locale at request time, so a Framer or Next.js front end renders RTL and LTR from one source. Hardcoded spacing is a CSS bug; hardcoded translations are a content model bug, and the second one is harder to unwind later. The practical consequence is that adding a third locale, or a second brand, or a native app that consumes the same Arabic copy, becomes a delivery decision rather than a rebuild. The structure carries the direction; the presentation layer just honors it. _This section includes a paid mention of Sanity._ ## 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](https://www.shaheermalik.com/services/arabic-website-design) 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](https://www.shaheermalik.com/blog/ultimate-guide-to-web-design-2026) apply identically in both directions once the structure is right. If you want a second pair of eyes on it, [send me the URL](https://www.shaheermalik.com/contact). FAQ ## Frequently asked questions 01 Is Arabic website design just flipping the layout? No. Direction is one part. Reading order, navigation, form alignment and directional icons mirror, but numbers, logos, media controls and time-axis charts must not. Typography also needs rework, because Arabic script sets taller than Latin and needs different line heights. 02 What does dir="rtl" actually do? It tells the browser the base direction of the document, which flips text alignment and inline flow. It does not fix hardcoded left and right spacing in your CSS, does not choose an Arabic typeface, and does not decide which icons should mirror. Those are design decisions. 03 Do I need a separate Arabic website? Usually not. Most businesses are better served by one bilingual site with a language switch, since the structure and content model are shared and only the direction-sensitive layer changes. Two separate sites means maintaining everything twice. 04 Does the designer write the Arabic copy? Not in my case, and be sceptical of anyone who says yes without an Arabic writer on the team. You or your translator supply the copy; the designer is responsible for the structure, typography and hierarchy that make it read correctly. 05 Why do numbers stay left-to-right in Arabic? Because numerals are read left-to-right even inside Arabic text. So are phone numbers, dates, prices and code. They are LTR runs embedded in RTL content, and forcing them to mirror makes them wrong rather than localised. 06 Which icons should mirror in RTL? Anything encoding reading direction: back and forward arrows, next and previous controls, text-indent icons, and speech bubbles with a tail. Leave alone anything encoding physical convention or brand — media playback controls, logos, clocks, checkmarks and spinners. 07 Is it cheaper to build RTL from the start or convert later? From the start, consistently. Converting a finished left-to-right site means hunting down every hardcoded margin, padding and alignment decision and undoing it. Designing both directions together costs a modest premium over one language; retrofitting often costs more than the original build. Arabic RTL Localization [Web Design](https://www.shaheermalik.com/blog/tag/web-design) Share: [X / Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fwww.shaheermalik.com%2Fblog%2Farabic-website-design-rtl&text=Arabic%20Website%20Design%3A%20What%20Actually%20Changes%20in%20RTL) [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.shaheermalik.com%2Fblog%2Farabic-website-design-rtl) Want it done for you? I offer [website design](https://www.shaheermalik.com/services/website-design) on a fixed price, from $700\. [See pricing](https://www.shaheermalik.com/pricing). On this page - [Why is Arabic web design so often done badly?](#why-is-arabic-web-design-so-often-done-badly) - [What mirrors and what does not?](#what-mirrors-and-what-does-not) - [Where do Arabic layouts usually break?](#where-do-arabic-layouts-usually-break) - [Should you build bilingual or Arabic-only?](#should-you-build-bilingual-or-arabic-only) - [How should bilingual content be managed?](#how-should-bilingual-content-be-managed) - [What does an Arabic site cost to build?](#what-does-an-arabic-site-cost-to-build) - [What to do next](#what-to-do-next) Keep reading [ Framer Shaheer Malik White-Label Framer Development: A Guide for Agencies How white-label Framer development works for an agency: what to agree in writing, how to brief a builder, how to price it to your client, and what to check in a pilot. November 10, 2026 7 min read](https://www.shaheermalik.com/blog/white-label-framer-development) [ Web Design Shaheer Malik Hourly vs Fixed-Price Web Design: Which Protects Your Budget? How hourly and fixed-price web design differ in who carries the risk, when each one is the right choice, and what a fixed price needs in writing to hold. November 10, 2026 6 min read](https://www.shaheermalik.com/blog/hourly-vs-fixed-price-web-design) [ Web Design Shaheer Malik Small Business Website Cost: What You Are Actually Paying For What sets the price of a small business website, what a quote should list, the costs that come after launch, and the questions to ask before you sign. November 10, 2026 7 min read](https://www.shaheermalik.com/blog/small-business-website-cost) ## What you can do here - Get a fixed-price proposal: https://www.shaheermalik.com/proposal/chat (describe the project in a sentence or two) - Free website audit: https://www.shaheermalik.com/audit?site=example.com (replace example.com with the site; the score needs no email) - Book a free scope call: https://www.shaheermalik.com/fixed-price-website#book - Contact: https://www.shaheermalik.com/contact - Prices and facts for the whole site: https://www.shaheermalik.com/llms.txt ## Structured data ```json { "@context": "https://schema.org", "@type": "BlogPosting", "headline": "Arabic Website Design: What Actually Changes in RTL", "description": "Right-to-left is a layout decision, not a text-direction toggle. What mirrors, what must not mirror, and where Arabic websites usually break.", "abstract": "Arabic website design means rebuilding the layout right-to-left, not translating the text and flipping a switch. Reading order, navigation, form alignment and icon direction all mirror. Numbers, logos, media controls, charts with a time axis and Latin brand names do not. Getting that split wrong is what makes an Arabic site feel broken.", "datePublished": "2026-08-15T10:00:00.00+00:00", "dateModified": "2026-09-29T00:00:00.00+00:00", "author": { "@type": "Person", "name": "Shaheer Malik", "url": "https://www.shaheermalik.com" }, "publisher": { "@type": "Person", "name": "Shaheer Malik", "url": "https://www.shaheermalik.com" }, "mainEntityOfPage": "https://www.shaheermalik.com/blog/arabic-website-design-rtl" } ```