Arabic-English Website Design: An RTL Checklist

Full disclosure: we design and build websites for businesses in India and the GCC, and we sell UI/UX design on its own too. Our published Arabic work so far is design, such as the bilingual identity we made for Tea Today, a tea café brand in the GCC; the new website we designed and built for ZAJEL, a Dubai courier, is live at zajel.com in English, with no Arabic version yet. We don't write Arabic copy ourselves, and neither does this guide: it describes how the pages should work and leaves the words to native writers.

It is written for owners, marketing heads and developers planning a bilingual site for the UAE, Saudi Arabia or the wider Gulf. Every technical rule links to the standard or guide it comes from, read on 4 October 2026.

Does a Gulf business need an Arabic website?#

Often, though not always. Arabic is the official language of the UAE, and the UAE government's fact sheet (opens in a new tab) notes: "All road and traffic signs, and signs on commercial outlets are in Arabic and English." The audience is online almost to a person: DataReportal counts 11.3 million internet users in the UAE and 34.4 million in Saudi Arabia, 99% of each population (UAE (opens in a new tab), 5 November 2025; Saudi Arabia (opens in a new tab), 8 November 2025).

The web itself is thin on Arabic. W3Techs finds Arabic (opens in a new tab) as the content language of 0.6% of the websites whose language it knows, against 49.5% for English (4 October 2026). That says nothing about demand, but it does suggest a well-made Arabic page has far less company than an English one.

When does English alone do? When your buyers are expatriates who work in English, such as many B2B buyers in the UAE, or when you are an Indian brand selling first to Indian residents. Our UAE launch playbook suggests starting there and planning Arabic, written natively, by about month six. Arabic moves up the list when you sell to Emirati or Saudi customers, to government, or into Saudi Arabia, which is Arabic-first.

This guide doesn't cover legal language requirements, which depend on your sector and emirate, so ask a UAE lawyer. Related rules do exist: Gulf food labels need Arabic, as our guide to Gulf packaging explains, and the Ministry of Finance notes that some emirates may require invoices in Arabic, which our UAE e-invoicing guide covers.

A language toggle or separate Arabic pages?#

Separate pages, each at its own address. Google's guide to multilingual sites (opens in a new tab) (updated 10 December 2025) is direct about why: "Google uses the visible content of your page to determine its language. We don't use any code-level language information such as lang attributes, or the URL." It recommends "different URLs for each language version of a page rather than using cookies or browser settings", and warns against redirecting visitors automatically by language, because it can stop people and search engines from seeing every version.

What that means in practice:

One URL per language. A subfolder such as /ar/ or a subdomain both work, according to the same guide, which marks URL parameters "Not recommended".
hreflang on every page, in both directions. Each language version lists itself and its partner. Google's hreflang guide (opens in a new tab) (updated 21 September 2026) says: "If two pages don't both point to each other, the tags will be ignored." Use ISO 639-1 language codes (ar, en), optionally with a region (ar-AE), and an x-default for visitors whose language you don't serve.
A visible switch to the matching page. The language link on a product page should open the same product in the other language, not the home page.
A whole page in one language. Google's guide calls out mixed languages and translated boilerplate around untranslated content as a poor experience; translate the page, not just the menu.

Google ignoring the lang attribute doesn't make it optional. The W3C's guide to why the lang attribute matters (opens in a new tab) lists what depends on it: font selection, spelling checkers, translation tools, and speech synthesisers and Braille translators that "produce usable results" only when they know the language.

What does right-to-left change in the layout?#

Almost everything with a direction, and a few things people expect to change but shouldn't.

Set direction in the markup. The W3C's guide to right-to-left text in HTML (opens in a new tab) says: "If the overall document direction is right-to-left, add dir="rtl" to the html tag", and "Do not use CSS to apply base direction in HTML pages." Declare the language with lang alongside it, because language and direction are separate facts.

Use logical CSS, not left and right. CSS logical properties such as margin-inline-start "enable defining properties relative to the content's writing direction, rather than a physical direction", as MDN's reference (opens in a new tab) (updated 18 November 2025) puts it. In an English page margin-inline-start is the left margin; in an Arabic page it is the right. One stylesheet then serves both languages, instead of a second one that someone forgets to update.

Mirror what has a direction. Apple's Human Interface Guidelines on right-to-left design (opens in a new tab) are written for apps, but the rules carry over to the web:

Mirror navigation and anything that moves through an order: a back arrow points right in Arabic, and sliders, carousels and progress bars run right to left.
Align text to the right, and keep alignment consistent across lists.
Don't flip logos or universal marks such as a checkmark; Apple warns that a flipped logo "confuses people and can have legal repercussions".
Avoid flipping icons of real-world objects; "clocks work the same everywhere".
Never reverse the digits inside a number. A phone or card number always reads in the same order.

Isolate mixed-direction text. Arabic pages are full of left-to-right fragments: brand names, model numbers, email addresses, prices. The W3C's article on inline bidirectional text (opens in a new tab) explains that such phrases go wrong when they start or end with punctuation, begin with a number or sit next to another opposite-direction phrase. The fix is to "tightly wrap every opposite-direction phrase in markup, and use the dir attribute on that markup", or use dir="auto" or the bdi element when the direction isn't known in advance. The Unicode Bidirectional Algorithm (UAX #9 (opens in a new tab), revision dated 1 September 2026) adds that on web pages the invisible direction-control characters should be replaced by HTML and CSS mechanisms.

How do you set Arabic type for the web?#

As a typeface in its own right, not as a fallback. Arabic is a joined, cursive script with its own proportions, so the settings that make Latin text look good can damage it.

Choose fonts built for Arabic. In Google Fonts' metadata, 57 of 1,950 families include Arabic (read 4 October 2026), among them Noto Kufi Arabic, Noto Naskh Arabic, Noto Sans Arabic, Cairo, Tajawal, Almarai, IBM Plex Sans Arabic, Readex Pro and Amiri. All nine are published under the SIL Open Font License in the Google Fonts repository (opens in a new tab). A family that covers both scripts keeps weights consistent; pairing two families works too, if someone matches them by eye.

Match the scripts, not the point sizes. The W3C's Arabic and Persian Layout Requirements (opens in a new tab) (Group Draft Note, 2 October 2025) notes that "Arabic ascenders and descenders extend much further than those of the Latin script, and care must be taken to correctly align text in the different scripts when they appear together." In practice that usually means setting Arabic slightly larger and with more line height than English for the two to look equal, and testing lines that mix them.

Don't letter-space Arabic. The same document explains that when Arabic is stretched, in a heading for example, the stretching runs along the baseline between joined letters (kashida), and such cases "do not correspond to letter-spacing in non-cursive scripts". Tracking settings borrowed from an English headline style pull the joins apart.

Keep weight and rhythm consistent. This is where our own work sits. For Tea Today, we drew an Arabic wordmark to sit at the same weight and warmth as the English one, and carried both onto café signage. Our guide to bilingual packaging applies the same rules to packs: design in both scripts from day one, and pair the typefaces deliberately rather than taking a default.

How should forms, numbers, dates and phone fields work?#

Forms are where bilingual sites often break, because users type in both directions.

Let the browser detect direction for user input. The W3C recommends dir="auto" "on forms and inserted text in order to automatically detect the direction of content supplied at run-time", and the dirname attribute to send that direction to the server with the form data.
Keep left-to-right fields left-to-right. Email addresses, website addresses and phone numbers stay left to right even on an Arabic page, so set their fields' direction explicitly.
Show phone numbers in their natural order. Wrap a number inside Arabic text so it reads as one left-to-right unit, and make it a tap-to-call or WhatsApp link.
Decide on numerals with your writer. Apple's guidelines note that Arabic text "might use either Western or Eastern Arabic numerals", and that the choice "varies among countries and regions". Pick one per audience and use it everywhere, including prices and dates.
Make dates unambiguous. Spell out the month, or use one consistent format, and label the calendar if you show more than one.
Translate the errors. Validation messages, placeholders and confirmation screens need Arabic too, and they are easy to forget.

Speed and the choice between a form and WhatsApp apply in both languages; our landing page checklist covers them.

How did a sample of UAE sites handle it?#

We checked 32 home pages of large UAE companies on 4 October 2026, across banking, telecoms, airlines, real estate, retail, energy and utilities, logistics, hospitality, food, healthcare, education and insurance. They were chosen as well-known names, not at random, and none is our client. Nine blocked automated requests and one sent only an empty JavaScript shell, which left 22 sites to analyse.

For each, we read the HTML the server sends before any JavaScript runs, found the Arabic version through hreflang tags, links and common paths such as /ar, and checked its markup.

What we checked (22 sites)	Sites
English home page declares a language with lang	19
An Arabic version at its own URL	16
Arabic and English versions linked with hreflang	10 of the 16
Arabic page declares lang="ar" on the html element	12 of the 16
Arabic page sets dir="rtl" on the html element	9 of the 16
All four basics: own URL, hreflang, lang and dir	7
No Arabic version found at a separate URL	6

Method: one fetch per page with a plain HTTP client, no browser. Sites that build pages with JavaScript may correct some of this after loading, which Google can see but other tools may not. We name no site, because the point is the pattern.

Three patterns stood out. Two Arabic pages declared themselves English (lang="en"), and one of them also set the direction to left-to-right in its server HTML. Several sites set right-to-left direction on the body or on inner elements rather than on the html element, where the W3C recommends it. And one site's hreflang pointed to an Arabic address that redirected to its English home page, so its Arabic link led nowhere useful. All three are cheap to fix and easy to miss without a check.

Who writes and reviews the Arabic?#

A native writer, and then a second native speaker who reviews it on the built page. Translated English reads as foreign, as our UAE playbook warns, and we don't use machine translation at all. For a UAE or Saudi audience, the writer should know how that audience speaks, not only formal Arabic.

A workable split of roles:

A native Arabic writer writes the copy from the brief, not from the English page, so headlines and calls to action work in Arabic.
The design team builds the right-to-left layout and sets the type, flagging anything that doesn't fit.
A second native reviewer reads every page in the browser, on a phone and a desktop, checking line breaks, mixed-language phrases, numbers and forms.
Your compliance or legal team supplies any regulated wording.

We hold our own site to the same rule: no Arabic page goes live until a named native reviewer approves it. If your build team is offshore, plan the Arabic writer and reviewer into the project from the start; our guide to outsourcing software work to India from the UAE covers how to run that kind of team.

The checklist#

Area	Check
URLs	Each language has its own URL (/ar/ subfolder or subdomain), with no URL parameters and no automatic language redirects
hreflang	Every page lists itself and its partner, both ways, with ar and en codes and an x-default
Markup	lang="ar" and dir="rtl" on the html element of every Arabic page; no base direction set in CSS
Switch	A visible language link on every page that opens the matching page
Layout	CSS logical properties instead of left and right; navigation, sliders and progress mirrored
Icons	Directional arrows mirrored; logos, checkmarks, clocks and numbers left alone
Mixed text	Brand names, codes, emails and prices wrapped with dir or bdi; no invisible control characters
Type	Fonts built for Arabic, weights matched by eye, extra line height, no letter-spacing on Arabic
Forms	dir="auto" on inputs, left-to-right fields for email, web and phone, Arabic error messages
Numbers and dates	One numeral style per audience, unambiguous dates, phone numbers kept in order
Content	Written by a native Arabic writer from the brief, reviewed in the browser by a second native speaker
Search basics	Arabic titles and descriptions of their own, not copies of the English
Testing	Every template checked in Arabic on a phone and a desktop before launch, then after each release

If you want a second pair of eyes on an existing bilingual site, our UI and UX design team designs and tests both directions for Gulf products.

Frequently asked questions#

Does Google use the lang attribute for Arabic pages?#

No. Google's guide to multilingual sites says it determines a page's language from the visible content and doesn't use code-level language information such as lang attributes. Set lang anyway, because browsers, spelling checkers, translation tools and screen readers rely on it, and use hreflang to tell Google which pages are translations of each other.

Should an Arabic website use a subfolder or a subdomain?#

Either works. Google's guide lists subdirectories such as example.com/ar/ and subdomains such as ar.example.com as options, each with trade-offs, and calls URL parameters "not recommended". What matters most is that each language has its own URL and the versions are linked with reciprocal hreflang tags.

Can we flip our English site to right-to-left with CSS?#

Not properly. The W3C advises against using CSS to set the base direction of an HTML page; it belongs in the dir attribute on the html element. Mirroring is also only part of the job: icons, numbers, mixed-language text, forms and the Arabic copy itself all need their own decisions.

Which Google Fonts support Arabic?#

Google Fonts' metadata listed 57 families with Arabic support out of 1,950 on 4 October 2026, including Noto Kufi Arabic, Noto Naskh Arabic, Noto Sans Arabic, Cairo, Tajawal, Almarai, IBM Plex Sans Arabic, Readex Pro and Amiri, all under the SIL Open Font License.

Do Arabic websites use Western or Eastern Arabic numerals?#

Both are in use. Apple's design guidelines note that Arabic text may use either, and that the choice varies between countries and regions. Agree one style per audience with your Arabic writer and apply it consistently, including in prices, dates and forms.

Build both directions from the start#

A bilingual site costs less when right-to-left is designed in from the first wireframe than when it's mirrored at the end. If you're planning one, tell us about your audiences and markets and we'll show you how we'd structure the URLs, layouts and type, and which parts need a native Arabic writer. You can also see how we plan campaigns and creative across the GCC.

Changelog#

2026-10-07: ZAJEL's new website is now live at zajel.com, in English only, so the disclosure no longer says it launches soon or that it is designed for Arabic, and no longer says we build Arabic sites: our published Arabic work is design.
2026-10-10: The disclosure now says we also sell UI/UX design on its own, with a link to that page.