Arabic-First, Not Arabic-Translated

Adding dir="rtl" takes twenty minutes. Making an Arabic interface feel like it was designed in Arabic takes considerably longer, and every Arabic-reading user can tell the difference within seconds of landing.

I build for clients in Egypt, Saudi Arabia, the UAE and Kuwait. Arabic is not a localisation ticket on those projects. It is the primary language, and the English version is the translation.

Latin fonts do not have Arabic in them

The first thing that breaks is type. Anton, Space Grotesk, VT323 — none of them contain Arabic glyphs. Set an Arabic string in them and the browser silently falls back to a system font, which is why so many bilingual sites have a confident Latin identity and a generic Arabic one.

The fix is to treat the Arabic face as a first-class part of the design system, not a fallback:

html[lang="ar"] {
  --font-display: "Lalezar", "Anton", sans-serif;
  --font-body: "Tajawal", "Space Grotesk", system-ui, sans-serif;
}

Then tune the metrics, because Arabic sets differently. Letter-spacing that gives Latin display type its punch actively damages Arabic, where letters connect. Line heights that look tight in English are cramped in Arabic, which has taller ascenders and deeper descenders.

html[lang="ar"] .huge { letter-spacing: 0; line-height: 1; }
html[lang="ar"] .kicker { letter-spacing: 1px; }

Logical properties, not left and right

Once you commit to both directions, every physical direction in your CSS becomes a bug waiting for a language switch. margin-left is wrong in one of the two languages, always.

/* fragile */
.badge { right: 12px; padding-left: 20px; }

/* direction-aware */
.badge { inset-inline-end: 12px; padding-inline-start: 20px; }

Modern browsers support these everywhere that matters. Once you have converted a codebase, the language toggle stops producing surprises, which is the entire point.

The things that must not flip

Mirroring is not universal. Some elements are direction-agnostic and flipping them makes them wrong:

• Numbers and Latin brand names stay left-to-right even inside Arabic text.
• Phone numbers, prices, dates, code read the same in both directions.
• Media controls — play still points forward in the direction of time, not the direction of reading.
• Logos are artwork, not layout.

This is where unicode-bidi: plaintext earns its place: it lets each string decide its own direction based on its content, so a product card containing Arabic text and a Latin SKU renders both correctly without you special-casing anything.

The bug nobody catches until launch

Infinite marquees. The standard trick translates the track by -50% and loops:

@keyframes slide { to { transform: translateX(-50%); } }

In an RTL container, that same animation runs the wrong way and the loop opens a visible gap on every cycle. My own site shipped with this bug until a client pointed it out.

The fix is to pin the mechanism to LTR and let only the content be bidirectional:

.marquee { direction: ltr; }
.marquee .item { unicode-bidi: plaintext; }

The same class of bug hits carousels, scroll-snap galleries, and any component that computes scrollLeft — which reports negative values in RTL and will happily disable your "next" button on the first render.

Write the Arabic first

The single change with the biggest impact costs nothing technical: write the Arabic copy first, then the English.

Translated Arabic reads translated. Sentence rhythm is different, formality expectations are different, and the direct English marketing voice comes across as either blunt or oddly casual. When Arabic is written first, the English translation absorbs the awkwardness instead — and the English reader is far more forgiving of slightly formal phrasing than the Arabic reader is of a machine-flavoured sentence.

If you take one thing from this: the Arabic version is not the same site facing the other way. It is the same product speaking to someone else, and it deserves the same design attention the English version got.

A short checklist

• Real Arabic display and body fonts, loaded and tuned
• Logical properties throughout, no left/right
• unicode-bidi: plaintext on mixed-content strings
• Marquees, carousels and scroll maths tested in both directions
• Forms, validation messages and empty states translated — not just the marketing pages
• Arabic proofread by a native speaker before launch. Always.