Bilingual Arabic-English Website Design: The RTL Guide for Dubai Brands

A bilingual Arabic and English site is two design systems sharing one codebase. The layout mirrors, and the type changes. Most teams in Dubai budget for the words and forget the second half, which is why so many Arabic pages read like an English page with the sentences swapped. Three decisions carry most of the result: give each language its own URL, declare text direction in the HTML rather than the stylesheet, and pick an Arabic typeface with its own size and line height instead of stretching the Latin one to fit.

There is also a question of obligation. For a UAE licensed online store, Arabic product information is required by law, not chosen for the market. That changes the order of work, so settle it before the first wireframe.

Arabic is the official language, and for online stores it is a requirement

The UAE Government portal states plainly that Arabic is the official language of the UAE, that the courts recognise five others (Chinese, English, French, Hindi and Russian), and that road signs and signs on commercial outlets appear in Arabic and English (u.ae fact sheet, accessed 6 October 2026). Signage habits are a reasonable guide to what customers expect from a website.

Consumer law goes further for anyone selling online. Under Federal Decree-Law No. 5 of 2023, which amends Federal Law No. 15 of 2020 on Consumer Protection, the invoice given to a consumer must be in Arabic and the supplier may add any other language it wishes. The same summary on u.ae says e-commerce businesses must give consumers and the authorities their licensing details along with information in Arabic about the product or service, its specifications, and the terms of contract, payment and warranty.

Two details decide whether this applies to you. The law covers goods and services across the UAE mainland and the free zones, including goods sold through e-commerce platforms registered in the UAE, and it does not cover trade between UAE customers and e-commerce businesses registered outside the country. Penalties for failing to give clear information and labelling run to imprisonment of up to two years and a fine of up to AED 2 million. A consultancy with a brochure site has room to decide; a Dubai licensed store shipping to Deira does not.

Agree what parity means before anything is designed

Google’s documentation on multilingual sites recommends using different URLs for each language version rather than switching content with cookies or browser settings, and asks site owners to avoid redirecting users automatically from one language version to another. It also warns that translating only the boilerplate while leaving the body in one language gives a poor experience when the same content turns up repeatedly in results under different wrappers.

Full parity is the cleanest promise and the most expensive one, because every page you add from then on exists twice. Partial parity is defensible if it is deliberate. A practical first set for a Dubai services company is the homepage, the service pages that generate enquiries, pricing, contact, and the policy pages. One issue we often see is the half state nobody chose: Arabic menu labels sitting above English body copy, which happens when a team translates the theme strings and stops.

Direction is markup, not styling

The W3C internationalisation guidance is direct about this. Add dir=”rtl” to the html tag whenever the overall document direction is right to left, and do not use CSS to apply base direction in HTML pages, because directional information affects the meaning of content and belongs in the markup. Set dir=”auto” on form fields and anything inserted at runtime, where the browser decides from the first strongly typed character.

The language attribute does a separate job. WCAG success criterion 3.1.1, Language of Page, at Level A, requires that the default human language of each page can be determined programmatically, which in practice means the lang attribute on the html element. Screen readers use it to load the right pronunciation rules. So the Arabic URL carries lang=”ar” dir=”rtl” and the English one carries lang=”en” dir=”ltr”, and neither is set from a stylesheet.

Build the layout once with logical properties

The old approach was a second stylesheet that reversed every left and right value. CSS logical properties remove most of that work by describing position relative to the flow of text. Use margin-inline-start rather than margin-left, padding-inline rather than padding-left and padding-right, inset-inline-start rather than left, border-start-start-radius rather than border-top-left-radius, text-align: start rather than text-align: left, and float: inline-start rather than float: left. Write the rule once and it resolves correctly in both directions.

For the cases that genuinely need different values, the :dir() pseudo-class is better than an attribute selector. According to MDN it matches inherited directionality and the computed value of dir=”auto”, which [dir=”rtl”] does not, and it has been widely available across browsers since December 2023.

WordPress still supports the older pattern, and it is worth knowing if you are on a theme rather than a custom build. The WordPress Codex describes two routes: generate a mirrored style-rtl.css with RTLCSS or CSSJanus and register it with wp_style_add_data( ‘themeslug-style’, ‘rtl’, ‘replace’ ), or hand write an rtl.css that overrides the horizontal values. Page builders and hand written left and right values are where a theme that claims RTL support usually falls over.

What mirrors and what stays put

That last row is not a style choice. The Unicode bidirectional algorithm treats a run of digits as its own directional unit, which is why AED 2,500 keeps its order inside an Arabic paragraph. The WordPress Codex makes the same point about input fields, advising that email, telephone, postal codes, codes and URLs stay left to right in both directions, which is simplest to handle by giving those fields their own class.

Arabic type needs its own scale

The W3C note on text layout requirements for the Arabic script, last published as a group draft on 2 October 2025, sets out the differences that matter to a designer. Arabic has no capital letters and no italics, so the emphasis tools a Latin design leans on are simply absent; weight, colour, size and alternate letter shapes carry that work instead. The note also warns that Arabic ascenders and descenders extend much further than Latin ones and that care is needed to align the two scripts when they appear together, which is the technical reason an Arabic paragraph set at the English line height looks cramped.

Numerals need a decision rather than a default. Three families are in use: European digits, the Arabic-Indic digits used in Egypt and Saudi Arabia, and the Eastern Arabic-Indic digits used in Iran and Afghanistan. They behave differently in bidirectional text, since Arabic-Indic digits carry the Arabic Number category while Eastern Arabic-Indic digits carry the European Number category. Pick one family, apply it to prices, phone numbers and dates alike, and do not let a payment widget introduce a second.

Font choice is narrower than designers expect. Checking the Google Fonts metadata on 6 October 2026, 57 of the 1,950 families there carry an Arabic subset. Noto Sans Arabic is variable with weight and width axes, Cairo is variable with weight and slant, IBM Plex Sans Arabic ships seven static styles with no variable axes, and Rubik covers Arabic, Latin, Hebrew and Cyrillic in one family, which keeps a bilingual site on a single type system. Naskh remains the basis for most typefaces meant for continuous reading, so a display face borrowed from a logo rarely survives a body text test.

Mixing the two scripts in one line

Dubai copy mixes scripts constantly: a Latin brand name inside an Arabic sentence, a +971 number, an email address, a trade licence reference. Punctuation and brackets are directionally neutral, so they take direction from whatever sits beside them, and a full stop can end up at the wrong end of the line. Lists of Latin items separated by commas inside Arabic text can reorder themselves.

The W3C recommendation is to fix this with markup rather than invisible characters. Wrap the foreign fragment in a bdi element, or a span with its own dir, because control characters cannot manage inheritance and scoping through the markup hierarchy. Where control codes are unavoidable, W3C prefers the isolate characters over the older embedding ones to avoid spillover into surrounding text. For anything a user or a database supplies, such as a review or a customer name, dir=”auto” on the containing element does the job without guessing.

The language switcher

Google suggests adding hyperlinks to the other language versions of a page so users can choose, and avoiding automatic redirection based on perceived location or browser settings. A visitor at DXB on a UK phone is not necessarily an English reader, and a UAE IP address says nothing about the language someone wants.

Four rules cover most of it. Label the switch in the language it leads to, so an English page offers العربية and an Arabic page offers English. Avoid flags, since Arabic is spoken across many countries and a single flag mislabels the language. Send the user to the matching page rather than the homepage, which is the single most common complaint we hear about bilingual sites. Keep the control in the header where a phone user can reach it without opening the menu.

Remembering the choice in a cookie is fine, as long as the URL still wins when someone arrives from a search result or a shared link. For the annotation side, which tells Google that two URLs are the same page in different languages, we covered the tag sets, the x-default rule and the canonical conflicts in a separate piece on hreflang for Arabic and English UAE sites.

Forms, embeds and the parts that break late

Forms are where bilingual projects lose their last week. Labels and validation messages are often hard coded in a plugin, placeholder alignment reverses with the field, and a phone input that forces a +971 prefix into a right to left context needs its own direction. Set dir=”auto” on free text fields so a customer writing in either script sees sensible alignment as they type.

Third party embeds are the other late surprise. Chat widgets, booking calendars, review feeds and some payment interfaces ship left to right only, and no amount of theme work changes that. Check each one against its own documentation before a parity promise goes into a proposal. The same gap shows up afterwards in PDFs, invoices and email templates, which rarely get the attention the website received.

Where bilingual budgets go

Translation is the visible cost and rarely the one that breaks a budget. The work people underestimate is the component audit, where every card, nav, button and form is checked in both directions, and the testing, which doubles because every template now has two states. After launch each new service page or case study needs an Arabic counterpart, or the gap widens month by month.

Two practical positions are defensible. Build bilingual from the start, which costs more in design and development but avoids a retrofit. Or build the English site on logical properties and a type system that already includes an Arabic family, then add the Arabic URLs later. What we would avoid is launching an English site with hard coded left and right values, because the audit needed to undo that is the expensive version of this project.

Figures and legal points here are indicative, taken from the public sources named on 6 October 2026, and this article is not legal advice; confirm the current requirements with your legal adviser or the relevant authority before you rely on them. If you are planning a bilingual build and want the direction, type and component work scoped before design starts, our web design team in Dubai can review your current site and tell you which parts survive the switch.

Cover photo: UAE Constitution by Lxs, via Wikimedia Commons (CC BY 4.0).