← Back to Blog

Most Arabic versions of GCC business websites are the English site with the text replaced and the whole layout mirrored by a plugin. They usually look acceptable on the homepage and fall apart somewhere on page three — a form that reads backwards, a phone number rendered right to left, a heading whose letters have come unjoined. None of that is unavoidable. It comes from treating Arabic as a translation task rather than a layout one.

Direction belongs in the markup, not the stylesheet

The single most common structural mistake is setting text direction in CSS. W3C's guidance is explicit: add dir="rtl" to the html tag whenever the document's overall direction is right-to-left, and do not use CSS to apply base direction.

The reason is practical rather than doctrinal. Direction is information about the content, not a presentation choice. Set it in markup and paragraph alignment, table column order and form field behaviour all follow automatically. Set it in CSS and it disappears the moment styles fail to load, are overridden, or the content is syndicated somewhere else.

Below the html element you should rarely need dir at all — it cascades. W3C's advice is to use it on structural elements only on the rare occasions the base direction genuinely changes, such as an English quotation inside an Arabic article.

For anything user-generated — reviews, comments, search fields, a name input — dir="auto" is the right tool. The browser looks at the first strongly-typed character and sets the direction from it. A single Arabic form field with dir="auto" handles both languages correctly without you knowing in advance which one someone will type.

Stop writing left and right

The highest-leverage change in the entire stylesheet is switching from physical directions to logical ones. Rather than margin-left, you write margin-inline-start: the start of the line, whichever side that happens to be.

The mapping documented by MDN covers essentially everything you use daily:

Do this and one stylesheet serves both languages. The alternative — an RTL override sheet that re-declares every offset in reverse — is where the page-three breakages come from, because someone eventually adds a component and forgets the override.

A useful discipline: treat any remaining left or right in your CSS as something that needs a comment explaining why it is deliberately physical. There are legitimate cases. There are far fewer than most codebases contain.

What must not flip

Mirroring is not universal, and over-mirroring looks as wrong as under-mirroring. Things that keep their left-to-right order inside otherwise right-to-left text include:

Mixing directions in one line is where bidirectional text gets genuinely difficult — a price inside an Arabic sentence, or an English product name in an Arabic heading. The rendering is governed by the Unicode bidirectional algorithm, and the practical consequence is that you cannot verify this by reading the code. It has to be checked visually, with real content, by someone who reads Arabic. Testing with placeholder text will not surface it.

Typography is where it looks amateur or does not

Arabic is cursive: letters join. That single fact invalidates a habit carried over from Latin type scales.

Do not apply letter-spacing to Arabic text. W3C's Text Layout Requirements for the Arabic Script is direct about this: "moving two joined characters closer to or further from each other creates undesirable results." Tracking that gives an English heading a considered, editorial feel will pull Arabic letterforms apart at their joins. It is one of the fastest ways to make a premium brand look careless in its home market.

The same document notes that "Arabic ascenders and descenders extend much further than those of the Latin script, and care must be taken to correctly align text in the different scripts when they appear together." In practice that means vertical spacing tuned for Latin will usually feel cramped in Arabic — but it does not prescribe a multiplier, and we are not going to invent one. Set it against real Arabic text at real sizes and look at it.

Justification is also a richer problem than in Latin. Arabic has six mechanisms available, including kashida — the elongation of the joining stroke between letters — and they are commonly used together. Browsers handle this unevenly, which is a reason to be conservative with justified Arabic body text on the web.

The parts nobody budgets for

The layout work is the visible half. The half that overruns:

Deciding whether you need it at all

An Arabic version is not automatically the right call. A poorly maintained one — stale content, machine translation, broken layout — signals less care than having no Arabic version at all, and in a market where your competitors are judged on exactly that kind of detail, it is a real cost.

The question worth asking is not "should we have Arabic" but "who is going to keep it current". If there is a clear answer, build it properly and design it in from the start. If there is not, an English site done well beats two sites done half-way.

Where an Arabic-first build genuinely pays is when the brand is being defined at the same time — the typeface, the tone and the layout system get chosen once, for both languages, instead of one being retrofitted around the other. That is a brand identity conversation as much as a build one, and it is much cheaper before anything is designed than after. Our piece on building a premium brand identity covers the identity side; if you are weighing up a bilingual build, tell us about the project.