Designing a right-to-left website: what actually breaks
Mirroring the layout is the easy part. Phone numbers, dates, forms, fonts and translation widgets are where right-to-left sites break, and how to test them.
The short answer
A right-to-left website breaks where Arabic and English meet, not where the layout flips: phone numbers and dates inside Arabic text, forms that reject Arabic names, fonts without Arabic letters, and icons or images flipped when they shouldn't be. Build with start and end instead of left and right, isolate anything that must read left to right, and test on a real phone with a native reader.
Type a UAE mobile number into an Arabic page the way you'd write it in English, +971 50 123 4567, and a browser can show it as 4567 123 50 971+. The Arabic around it is fine. The number is what's wrong, and it's the one line a customer needs to get right. Paste your own number into your own Arabic page now and read it back.
That's the pattern with right-to-left design. Mirroring the layout is the well-understood part, and what breaks is everything that mixes English and Arabic or assumes English was the only language. The steps below run in the order of a build, and each says what to do if it fails.
Start by finding out how many of your visitors read Arabic, because we couldn't find an official number to borrow. The UAE government portal names Arabic as the official language and says expatriates outnumber nationals, but it publishes no percentage. Google Analytics 4 reports the language setting of your visitors' browsers, which tells you more about your site than any national figure.
How do you build a right-to-left website that holds up?
Build it in eight steps, in this order, because each one makes the next cheaper to get right.
- Get Arabic copy from a native writer before the design is signed off, so layouts are tested against real words. If the copy can't come first, design against the real headline and the longest button label.
- Give every Arabic page its own URL, set lang to ar and dir to rtl on it, and pair it with its English twin using hreflang. If your platform switches language on one address with a cookie or a script, change that first: a page with no address of its own can't be listed, shared or linked.
- Write the CSS with start and end instead of left and right, so margins, alignment and flex rows follow the page direction. If the site already hard-codes left and right, expect to revisit every component, and check sliders, slide-in menus and positioned elements by eye.
- Choose an Arabic font on purpose. If your brand font has no Arabic letters, the browser fills the gap with a system font and the page looks as if it belongs to two brands. Pick a family built for Arabic, such as Noto Sans Arabic or Cairo from Google Fonts, compare it side by side with the English and adjust the size until the two look equal, and load only the weights you use. Drop italics, uppercase labels and letter-spacing from the Arabic styles: the script has no italic or capitals, so hierarchy has to come from size and weight.
- Isolate everything that must read left to right, by marking each one as left to right: phone numbers, email and web addresses, order numbers and English dates. If your CMS editor strips the dir attribute, put the value in a template field that sets the direction.
- Pick one digit style and one date format and use them everywhere. If a date picker shows the wrong week, it's probably using the wrong locale.
- Rebuild the forms for Arabic input, then follow one Arabic lead through your inbox, your CRM and your WhatsApp link. If any stage shows question marks or scrambled text, that system needs its own fix.
- Flip the icons that point, leave the ones that don't, and redo any image that carries words. If a flipped photograph contains a sign, writing or a landmark, use the original.
Why do phone numbers and dates scramble, and how do you stop it?
Browsers lay out mixed text with the Unicode bidirectional algorithm, and in a right-to-left line the spaces between digit groups take the line's direction. Each group keeps its own left-to-right digits, but the groups are placed from right to left, and the plus sign, which has no direction of its own, lands on the wrong side of the number. A similar scramble hits an English date inside an Arabic sentence: 7 November 2026 can come out as November 2026 7.
The fix is to tell the browser the number is its own left-to-right island. Set dir to ltr on the element that holds it, use the bdi element, or apply direction ltr with unicode-bidi isolate in CSS. Do it for the phone number on the contact page and in the footer, the link behind the call button, email addresses and the order reference on confirmation pages. The number can still sit on the right edge of its block and read correctly.
Not everything that looks odd is a bug. A full stop after an English name at the end of an Arabic sentence lands on the left, which is correct in a right-to-left line even though it looks wrong to an English eye. Judge by what a native reader says, not by what English punctuation would do.
Which digits, dates and week should an Arabic page use?
Western digits (0 to 9) and Eastern Arabic-Indic digits are both legitimate Arabic typography, so the rule is consistency: a price, a date and a phone number on one page shouldn't use different sets. Ask a native reviewer which suits your audience, then make the choice once in the template, not page by page.
Then ask your developer which Arabic locale formats the numbers and dates, because the choice moves more than digits. In the Unicode locale data (CLDR 46), ar-AE gives 0 to 9 and a Saturday and Sunday weekend, ar-SA and ar-EG give Eastern digits, and plain ar assumes a Friday and Saturday weekend. The National reported in 2021 that the federal government's weekend became Saturday and Sunday with a half day on Friday, and private companies set their own week, so a booking calendar should follow your own opening days.
What should the Arabic form accept, and where does the lead go?
Test the form with an Arabic name first, because some validation rules allow only A to Z and reject the lead before it exists. Then enter the number two ways, +971 50 123 4567 and 050 123 4567. In international format a UAE number loses its leading 0, so a form that glues +971 onto the local version creates a number that doesn't exist.
WhatsApp links are stricter: they want the full number in international format, with no plus sign, zero, brackets or dashes, so build the link from a cleaned copy of the field. Then submit one Arabic lead and follow it. The confirmation email, the alert to your team, the CRM record and the WhatsApp message each handle Arabic separately, and any one of them can break.
Why doesn't a translate button give you an Arabic website?
A translate button changes the words in the visitor's browser and leaves the page English-shaped: the layout still runs left to right, the Arabic has no address of its own for a search engine to list, and nobody at your company has read what it says on your behalf. It suits a visitor who has already decided to stay. It isn't a version of your site for people who read Arabic.
Plugins that create separate Arabic URLs fix the address and leave the other two problems, the mirrored layout and the wording, which still need a person. We write Arabic with native writers and never machine-translate, and our Arabic SEO work starts from the same rule. If you use machine output at all, treat it as a rough draft for a native writer to rewrite, never as the published page.
You can check any site in two minutes. Open the Arabic page and see whether its address differs from the English one, then look at the logo and menu: if they haven't moved to the right, nothing was mirrored.
What should a native reader check before launch?
Give a native reader the table below and the staging site on their own phone, and ask them to mark every line they'd change, not only the lines that are wrong.
| Test | It passes when | It fails when |
|---|---|---|
| Phone number with spaces | It reads +971 50 123 4567 left to right and tap-to-call works | The groups are reversed or the plus sign sits on the wrong side |
| English date inside an Arabic sentence | The day, month and year stay in order | The words and numbers are shuffled |
| Arabic name with a long second part | The form accepts it and it wraps cleanly on a phone | The form calls it invalid, or the name is clipped |
| Email and web addresses | They read left to right and can be selected | Dots or characters come out of order |
| Arrows, breadcrumbs, steps and sliders | They point and run in the reading direction | They point backwards, or the first slide is on the wrong side |
| Banners and images with words | An Arabic version exists | English text is baked into the picture |
| Arabic page speed on a phone | Google's web.dev thresholds are met: Largest Contentful Paint within 2.5 seconds and Cumulative Layout Shift of 0.1 or less | The Arabic page is slower than the English one because of its extra font and images |
| WhatsApp button and form lead | The chat opens to the right number and the lead arrives readable in email and CRM | The number is wrong, or the lead shows question marks |
Put the table into your website brief and ask your web design team to return it filled in on the staging site before anything goes live.
Questions people ask
What does RTL mean in web design?
RTL means right to left, the direction Arabic is written and read. In web design it covers the whole page: text aligns right, the logo and menu move to the right, and the order of columns, steps and sliders reverses. Phone numbers, email addresses and Latin brand names stay left to right even inside an Arabic page.
Do I need a separate website for Arabic?
No. One site is enough when each important page has an Arabic version at its own address, marked as Arabic and linked to its English twin. A second domain means two sites to run and two sets of links to earn. A button that translates the words in the browser doesn't count as an Arabic version.
Can I use Google Translate for my Arabic pages?
Use it for a first draft at most. Machine translation of sales copy reads as translated, and nobody at your company has checked what it says on your behalf. Have a native Arabic writer write or rewrite each page, then have a second native reader check it on a phone before it goes live.
Should an Arabic website use Arabic or Western digits?
Either can be right, so decide with a native reviewer and then stay consistent. What goes wrong is mixing them: prices in one style, phone numbers in another and dates in a third. Check which digits your platform uses by default, because the locale it formats numbers with decides which ones appear.
How do I test an Arabic website properly?
Open every key page on a real phone, in Arabic, on mobile data. Paste in a phone number with spaces, an English date and an Arabic name with a long second part, submit the form, and follow the lead into your inbox and CRM. Then ask a native reader to mark every sentence they would change.