Arabic and RTL website development: a guide for UAE and Saudi businesses

English is widely used in Gulf business, especially in the UAE. But many customers, government buyers and partners still prefer to read and search in Arabic. In Saudi Arabia, Arabic is the default for most consumer and public-sector audiences. A site that only works in English leaves part of the market reading a competitor's page instead.

An Arabic version also helps search visibility. People search in Arabic on Google and ask AI assistants questions in Arabic. If your content only exists in English, you are unlikely to appear for those queries. A properly built bilingual site gives search engines and AI answer engines a clear Arabic page to show.

RTL is not just aligning text to the right. The whole reading direction flips, so the layout should mirror too. Here is what changes:

• Page direction: the navigation, logo, sidebars and columns mirror. The logo usually moves to the top right, and the menu reads from right to left.
• Text alignment: paragraphs, headings and lists align to the right, and bullet points sit on the right side.
• Directional icons: arrows, "next" and "back" buttons, chevrons and progress bars should point the other way.
• Forms: labels and inputs mirror, but some fields, such as email addresses, phone numbers and URLs, should stay left-to-right.
• Carousels and sliders: the swipe direction and the order of slides should feel natural to an Arabic reader.

Some things should not mirror. Logos, brand marks, media playback controls, clocks, charts with time on the horizontal axis and photographs generally stay as they are.

A clean RTL build starts in the HTML and CSS, not in a plugin added at the end.

Set language and direction in the markup

Each Arabic page should declare lang="ar" and dir="rtl" on the <html> element. This tells browsers, screen readers and search engines how to treat the content. Use dir="auto" on user-generated content, such as comments or reviews, where the language is not known in advance.

Use CSS logical properties

Older stylesheets use physical properties like margin-left and padding-right. These have to be overridden for RTL, which doubles the work. Modern CSS logical properties, such as margin-inline-start, padding-inline-end and text-align: start, flip automatically with the page direction. Building with them from day one means one stylesheet serves both languages.

Handle mixed-direction text

Arabic pages often include English brand names, product codes, prices and numbers. The browser's bidirectional algorithm usually handles this, but punctuation and parentheses can end up in the wrong place. Wrapping embedded content in <bdi> or setting dir on the specific element keeps it in order. Test pages with real mixed content, not placeholder text.

Mirror icons deliberately

Keep a short list of which icons flip and which do not. A CSS transform can mirror directional icons in RTL mode, but apply it selectively so that logos and universal symbols are left alone.

Arabic script is cursive and connected, with letters that change shape depending on their position. Fonts designed for Latin text often include poor Arabic glyphs or none at all. Choose a typeface with a proper Arabic design, and pair it with a Latin font that has a similar weight and feel.

Popular web-safe choices include Noto Naskh Arabic, Noto Kufi Arabic, IBM Plex Sans Arabic, Cairo and Tajawal, all available through Google Fonts. Naskh styles suit long reading text. Kufi styles feel more geometric and suit headings and modern brands.

Practical typography tips:

• Arabic often needs a slightly larger font size and more generous line height than English to stay readable.
• Avoid letter-spacing on Arabic text. It breaks the connections between letters.
• Avoid all-caps styles and italics, which have no real equivalent in Arabic.
• Load only the font weights you use, to protect page speed.

Search engines need a separate, crawlable URL for each language. Do not swap languages with a cookie or a script on the same URL, because Google may only ever see one version.

Whichever you pick, add hreflang tags that link each English page to its Arabic equivalent. You can target by language (ar) or by language and region (ar-AE, ar-SA) if the content genuinely differs by country. Include an x-default for visitors who match neither.

Translate the metadata too: page titles, meta descriptions, image alt text, structured data and URL slugs where practical. Keyword research should be done in Arabic, because a direct translation of an English keyword is often not what people actually type. Gulf audiences may also search with dialect terms or in "Arabizi" (Arabic written in Latin letters), so check real search behaviour. Our SEO, AEO and GEO service covers bilingual keyword research and technical setup.

Machine translation and AI tools are useful for drafts and for large volumes of low-risk content. They are not enough on their own for key pages. Arabic has formal and dialect forms, gendered grammar and cultural nuances that automated tools can get wrong.

A sensible approach is to use AI for a first draft and have a fluent Arabic speaker review the home page, service pages, legal pages, calls to action and anything customer-facing. Write for the local audience rather than translating word for word. A Saudi customer and an Emirati customer may respond to slightly different wording, imagery and examples.

Most modern platforms support RTL, but the quality of the theme or front end matters more than the CMS itself.

• WordPress: core supports RTL and loads an rtl.css file when the site language is RTL. Multilingual plugins such as WPML or Polylang manage translations. Check that your theme and page builder are genuinely RTL-ready. See our WordPress development service.
• Drupal: has strong built-in multilingual and RTL support, which suits larger content sites and headless builds.
• Shopify and WooCommerce: both can run Arabic storefronts, though theme RTL support varies. Test checkout, cart and emails in Arabic.
• React and Next.js: internationalisation libraries handle translations and routing. You still need to set direction and use logical CSS properties yourself.

• Numerals: decide whether to use Western Arabic digits (0-9) or Eastern Arabic digits. Many Gulf sites use Western digits, but be consistent.
• Dates and calendars: some Saudi audiences and public-sector buyers expect Hijri dates alongside Gregorian ones.
• Working week: the UAE moved its official weekend to Saturday and Sunday in 2022, while Saudi Arabia's weekend is Friday and Saturday. Reflect this in opening hours and support times.
• Payments: for e-commerce, local options such as Mada cards in Saudi Arabia, Apple Pay and buy-now-pay-later providers are often expected.
• Phone and address formats: accept country codes and local address structures in forms.
• Data protection: both the UAE and Saudi Arabia have personal data protection laws. Review your cookie consent, privacy notice and where form data is stored with a qualified adviser.

Test with Arabic-speaking reviewers, not only developers. Check every template in both directions on mobile and desktop. Look for overlapping text, icons pointing the wrong way, broken forms and English fallbacks that slipped through. Test with screen readers to confirm the language is announced correctly, and aim for WCAG 2.2 AA in both languages. Finally, check Core Web Vitals on Arabic pages, since extra fonts can slow loading. A structured website audit can catch these issues before launch.

We design and build bilingual English and Arabic websites with RTL planned in from the first wireframe, along with Arabic SEO and testing. If you are launching or rebuilding a site for the UAE or Saudi market, see our UAE page or get in touch to talk through your plans.