Bilingual RTL Web Design: Best Practices for UAE and Oman Websites
In the UAE and Oman, a business website speaks to Arabic readers, English-speaking residents and international buyers — often on the same day, sometimes in the same family. Serving all of them well is not a matter of translating the words. When the language switches from English to Arabic, the whole page has to turn around: reading direction, layout, navigation, icons and the way numbers sit inside sentences.
Done badly, the Arabic version is where visitors notice the cracks — clipped text, arrows pointing the wrong way, a phone number scrambled mid-sentence — and leave. Done well, nobody notices anything, which is the point.
Whether your business needs an Arabic site at all is covered in does your UAE business really need an Arabic website, and getting the words right in translation vs localization. This guide is the next step: how to build the bilingual right-to-left (RTL) site itself.
Start with the markup, not the stylesheet
Every Arabic page should declare its language and direction on the root element: <html lang="ar" dir="rtl">. That one attribute tells the browser, screen readers and search engines what they are dealing with, and it flips text alignment, table columns and form fields without a line of custom code.
Then write the CSS with logical properties — margin-inline-start, padding-inline-end, text-align: start, inset-inline-end — instead of left and right. A logical property means “the side where reading begins”, so one stylesheet serves both languages and nothing has to be overridden for Arabic. Flexbox and grid layouts already follow the document direction.
What to avoid: a separate, hand-patched Arabic stylesheet full of float: right overrides, or mirroring whole sections with a CSS transform. Both work on launch day and drift apart from the English site with every change after it.
What to mirror — and what to leave alone
In Arabic, the page reads from the top right. The main elements swap sides accordingly.
Navigation: logo on the left and menu on the right in English; logo on the right and menu on the left in Arabic. The primary call-to-action button moves with it.
Reading flow: the eye scans from the top left in English and from the top right in Arabic, so the most important content sits on the right of an Arabic page.
Direction-bearing icons: back and forward arrows, “next” chevrons, breadcrumbs, carousels and progress bars all point and fill the other way.
Leave alone: logos and brand marks, product and team photos, media play buttons, clocks, check marks, and anything that represents a real-world object rather than a direction. A mirrored play button or a reversed photograph looks like a mistake, because it is one.
Text inside images: translate it or, better, keep text out of images altogether so it can live in the HTML in both languages.
Forms and tables: labels, icons and validation messages sit on the right of the field; checkboxes and radio buttons go to the right of their labels; and in a data table the first column — the name, the reference number — becomes the rightmost one. On a phone, the menu drawer slides in from the right, and swipe gestures such as “next photo” follow the reading direction.
Arabic typography deserves its own decisions
Choose a typeface designed for Arabic, not a Latin font with Arabic glyphs bolted on. Cairo, Tajawal, IBM Plex Sans Arabic, Noto Naskh Arabic and the Dubai Font are all solid web choices; pick one whose visual weight sits comfortably next to your English typeface.
Arabic needs room. At the same nominal size it reads smaller than Latin text, so it usually wants a slightly larger size — often a pixel or two — and more generous line height: where English body text sits comfortably around 1.5, Arabic typically needs 1.6 to 1.8 so that dots and tall letters are not clipped. Test headings and buttons with real Arabic copy, which is often shorter or longer than the English and wraps differently.
Never add letter-spacing to Arabic: it breaks the joins between letters. Avoid faux italics too — Arabic has no italic tradition, and slanting it makes text look broken rather than emphasised. Use weight or colour for emphasis instead.
Numbers, phone numbers and mixed text
Arabic pages are full of left-to-right fragments: phone numbers, email addresses, prices, brand names in Latin script. The browser’s bidirectional algorithm usually places them correctly, and occasionally scrambles them — a +971 number with its plus sign at the wrong end, or a price whose currency jumps to the other side.
Isolate those fragments. Wrap phone numbers, emails and codes in <bdi> or a span with dir="ltr", and set dir="ltr" on email, phone and URL input fields so what people type stays readable.
Pick one digit style and keep it. Western digits (0–9) are the common choice on UAE and Omani business sites; Eastern Arabic digits (٠–٩) are a legitimate alternative. Mixing both on one page looks careless.
Format currency consistently in each language — “AED 3,000” in English, “3,000 درهم” in Arabic — and remember that the Omani rial is divided into 1,000 baisa, so OMR prices are conventionally written with three decimal places.
URLs, hreflang and the language switch
Give each language its own URL — /en/… and /ar/… is the cleanest pattern, and it is how this site is built. Google indexes the Arabic and English pages separately only if they exist at separate addresses; a site that swaps language with a cookie or a script on the same URL is, as far as search is concerned, a one-language site, because Google’s crawler does not keep your cookies.
Connect the pairs with hreflang: each page lists itself and its counterpart in the other language, plus an x-default. Write unique titles and meta descriptions in each language rather than translating the English ones word for word — the Arabic searcher types different words, which is what Arabic keyword research is for.
Make the language switch link to the same page in the other language, not to the other homepage. And do not force-redirect visitors by browser language: suggest the other version if you like, but let people — and crawlers — reach the page they asked for.
Put the switch where people look for it: in the header on desktop, and visible on mobile without opening a sub-menu. Label each language in its own script — “العربية” and “English”, not “Arabic” and “إنجليزي” — so a reader who cannot read the current page can still find their way out of it. And skip the flags: a flag is a country, not a language. Arabic is the language of more than twenty countries, and a Union Jack on the English link tells an Emirati or Omani visitor nothing useful.
Notes for Oman
Everything above applies in Oman unchanged; what differs is emphasis. Arabic carries more of the everyday business conversation in Oman than in Dubai’s expatriate-heavy market, so the Arabic version is often the one that does the selling and deserves to be written first, not translated last.
Use Omani details where you serve Omani customers: +968 phone numbers, prices in OMR with three decimals, and real place names — Muscat, Sohar, Salalah — rather than a UAE page with the city swapped. The wider picture for Omani buyers is in choosing a web design company in Oman, and how we handle these details for our own clients is on our Oman page.
Test it like an Arabic reader would
Before launch, switch language on every page template, not only the homepage. Fill in every form in Arabic and read the validation messages. Check the emails and PDFs the site sends — confirmations, invoices, quotes — because they are usually the last thing anyone mirrors. Then do it all again on a phone, where most of your visitors are.
Most of all, have a native Arabic reader go through the site. Layout bugs are easy to spot; a sentence that is grammatically correct and still sounds translated is not, and it is the thing customers notice first.
We built the Al-Azhar University platform in seven languages, Arabic among them, on exactly these principles. To build your own bilingual site the same way, see our web development service or request a free consultation and quote.
FAQ
What is the biggest mistake in bilingual web design?
Treating Arabic as an afterthought: running the English site through a machine-translation plugin and leaving the layout left-to-right. The words come out stilted, the layout reads backwards, and search engines often cannot index the Arabic at all.
How do search engines index a bilingual website?
Google indexes each language separately when each has its own URL, hreflang tags linking the pairs, and its own title and description. Language switched by cookie or script on a single URL is usually indexed in one language only.
Should images be mirrored for Arabic?
Directional graphics — arrows, progress indicators, diagrams with a flow — should be mirrored, and text inside images translated. Logos, product photos and pictures of people stay exactly as they are.
Should I use flags for the language switcher?
No. Flags stand for countries, not languages — Arabic is spoken in more than twenty countries and English almost everywhere. Label each option in its own script, “العربية” and “English”, and keep the switch visible in the header on both desktop and mobile.
Do mobile layouts need separate RTL work?
Mostly no, if the CSS uses logical properties — the mobile layout mirrors with the rest. What needs checking by hand is behaviour: the menu drawer should open from the right, swipeable carousels should move in the reading direction, and long Arabic words in buttons should wrap rather than overflow on narrow screens.
How does SmartTech build bilingual websites?
Arabic and English are designed together from the first wireframe, on one codebase with logical CSS, separate URLs and hreflang for each language, and Arabic copy written natively rather than translated.
Related service
Web Development
Fast, multilingual websites and web apps that rank and convert.
from AED 3,000