We build a lot of English/Arabic sites for businesses in the UAE, and the same right-to-left (RTL) issues come up on almost every project. Here's the checklist we run before launch.

1. Set direction and language on the root 

<html lang="ar" dir="rtl">

Set both per page, not with JavaScript after load. Screen readers, search engines and the browser's text shaping all rely on lang, and dir controls layout from the first paint.

2. Use logical CSS properties

Replace physical properties with logical ones so one stylesheet works in both directions:

/* instead of margin-left / padding-right / left */ .card { margin-inline-start: 1rem; padding-inline-end: 1.5rem; } .badge { inset-inline-start: 0; } .text { text-align: start; }

Flexbox and grid already follow dir, so most layouts flip for free once the physical properties are gone.

3. Mirror icons that imply direction, not all icons

Arrows, "next/back" chevrons and progress indicators should flip. Logos, play buttons, checkmarks and phone icons should not.

[dir="rtl"] .icon-directional { transform: scaleX(-1); }

4. Handle numbers and mixed text

Phone numbers, prices and English brand names inside Arabic sentences can render in the wrong order. Wrap them:

<bdi>+971 50 000 0000</bdi>

and use dir="ltr" on inputs for phone numbers and emails.

5. Pick a proper Arabic font

System fallbacks often look uneven next to a Latin brand font. Choose an Arabic family with matching weights, and bump line-height slightly (around 1.7) because Arabic glyphs need more vertical room.

6. Give each language its own URL

/en/... and /ar/... (or a subfolder per language) with hreflang tags lets Google index both versions instead of treating one as a duplicate:

<link rel="alternate" hreflang="en" href="https://example.com/en/" /> <link rel="alternate" hreflang="ar" href="https://example.com/ar/" />

Avoid auto-translation plugins that serve both languages on the same URL.

7. Test the real flows in RTL

Forms, validation messages, sliders, date pickers and WhatsApp/contact buttons are where RTL bugs hide. Click through every one in Arabic on a phone before launch.

We're Oxedge, a small web design studio in Dubai. If you want to see how we approach bilingual projects, our notes on web design in Dubai cover the process end to end.