RTL bugs in Arabic and English websites, and how to fix each one

Building a site in Arabic and English is not "flip it and translate". These are six RTL bugs we have hit in real projects, including on this very site, and what fixed them.

1. The page scrolls sideways in Arabic only

Symptom: on a phone, the Arabic page can be dragged left and shows empty space.

Cause: something sits outside the screen on the "start" side. We found a hidden anti-spam form field positioned with left: -9999px. In English it hid harmlessly to the left; in Arabic the page grew ten thousand pixels wide.

Fix: hide things without moving them, and clip the page as a safety net.

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
html, body { overflow-x: clip; }

2. Margins on the wrong side

Cause: margin-left, padding-right and left: are physical directions.

Fix: use logical properties, which follow the reading direction.

.card { margin-inline-start: 16px; padding-inline-end: 12px; inset-inline-end: 0; }

3. Numbers, emails and code get scrambled

Symptom: +966 53 000 0000 shows up as 0000 000 53 966+, or an email jumps around inside an Arabic sentence.

Fix: isolate left-to-right runs.

<span dir="ltr">+966 53 000 0000</span>

.phone, code { direction: ltr; unicode-bidi: isolate; }

4. Icons that should flip, and icons that shouldn't

Arrows for "next" and "back" should mirror in Arabic. Play buttons, checkmarks and logos should not. Mirror selectively:

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

5. Arabic looks squeezed

Cause: a Latin font with fallback Arabic glyphs, and Latin line height.

Fix: set a real Arabic font for :lang(ar) and give it more line height.

:root[lang="ar"] body { font-family: "Noto Naskh Arabic", serif; line-height: 1.9; }

6. Search engines see one language

Fix: give each language its own URL, tell Google they are translations of each other, and set lang and dir on the html element.

<html lang="ar" dir="rtl">
<link rel="alternate" hreflang="en" href="https://example.com/post">
<link rel="alternate" hreflang="ar" href="https://example.com/ar/post">

FAQ

Should I build two separate sites?

No. One codebase with logical CSS and translated content is easier to keep in sync. Separate URLs per language are what matter for search.

Does Tailwind support RTL?

Yes. Use the logical utilities (ms-*, me-*, ps-*, pe-*, start-*, end-*) instead of left and right.

---

Building a bilingual site? Ask the editor on ahmed-adil.com.