Arabic RTL design is treated as a checkbox: set dir="rtl" and ship. What arrives is a mirrored English interface that native readers find subtly wrong in ways they often cannot articulate — they just prefer the English version.

These are the seven issues we find most often, roughly in order of how much damage they do.

1. Physical CSS properties instead of logical ones

This is the single most common bug and it causes visible breakage.

A rule like margin-left: 20px stays on the left in RTL, where it should move to the right. Worse, left: 50% paired with transform: translateX(-50%) — the standard centring trick — pushes content off-screen entirely when the layout flips.

The fix: use logical properties. margin-inline-start, padding-inline-end, inset-inline-start, border-inline-start. They resolve to the correct physical side automatically.

The exception worth knowing: when centring with translateX(-50%), keep the physical left: 50%. The transform is not direction-aware, so pairing it with a logical property inverts the offset and breaks RTL only.

2. Line height tuned for Latin type

Arabic glyphs have taller ascenders and deeper descenders than Latin. A line-height: 1.1 that looks tight and modern in English causes stacked Arabic lines to collide.

The fix: raise line-height to roughly 1.4–1.6 for Arabic headings and 1.8 for body text. Set it in an [dir="rtl"] block so the English version keeps its tighter setting.

3. Letter-spacing applied to Arabic

Arabic is a connected script. Applying letter-spacing pulls the joined letterforms apart and produces text that looks broken to a native reader.

The fix: [dir="rtl"] { letter-spacing: 0; }. Never apply tracking to Arabic.

4. Mirroring things that should not mirror

Directional icons — back arrows, next chevrons, progress indicators — should flip. Logos, clock faces, media playback controls and checkmarks should not. Blanket-mirroring the whole interface produces a play button pointing the wrong way.

The fix: mirror by intent. Add a utility class such as .icon-flip and apply it only to icons that genuinely express direction.

5. Numbers and mixed-direction text

Phone numbers, prices, dates and Latin brand names inside Arabic sentences are bidirectional text, and browsers sometimes reorder them unexpectedly — a phone number can render with its country code at the wrong end.

The fix: wrap the mixed run in an element with dir="ltr". For phone numbers specifically, this is essential and takes one attribute.

6. Using a Latin font for Arabic

Many web fonts have no Arabic coverage, so the browser silently substitutes a system fallback. The result is Arabic in a completely different typeface from the rest of the design.

The fix: choose a genuine Arabic web font — Cairo, Tajawal, IBM Plex Sans Arabic and Noto Sans Arabic are all solid — and set an explicit family stack for RTL. Then actually look at a page of Arabic text before shipping.

7. Form fields and validation

Placeholder alignment, error message position, required-field markers and input direction all need attention. A common failure is an email or URL field that should stay LTR sitting inside an RTL form and displaying reversed.

The fix: set dir="ltr" on inputs holding inherently LTR data — email addresses, URLs, phone numbers — while keeping their labels in RTL.

The fastest way to find these is to open your Arabic pages and read them as a user, not as a developer checking that nothing 500s. Most of these bugs are obvious on sight and invisible in a test suite.

A quick audit checklist

  • Does any page scroll horizontally in RTL? If so, something is overflowing.
  • Do stacked Arabic headings collide?
  • Do phone numbers display with the country code first?
  • Is the Arabic font the one you chose, or a fallback?
  • Do back and forward arrows point the correct way?
  • Does the mobile menu open from the correct edge?

Six checks, ten minutes, and they catch the majority of Arabic RTL design problems before a user does.