One Codebase, Two Directions: Arabic and English Done Properly

Start with the URL

Give each language its own path (/ and /ar). The route decides the language, the lang and dir attributes, and the metadata. Storing the language only in a cookie or local storage makes pages impossible to link to and invisible to search engines.

Write layout once, in logical terms

Use logical CSS properties (margin-inline-start, text-align: start, padding-inline) instead of left and right. The same component then works in both directions. Decide deliberately which icons mirror: arrows and back buttons should, logos and checkmarks should not.

Treat mixed-script text with care

Arabic sentences often contain Latin terms such as product names or code. A sentence that begins or ends with a Latin word, or that contains parentheses and colons around one, can reorder visually. Keep technical tokens inside the sentence, wrap them in dir="ltr" when needed, and read the result on a real screen instead of trusting the source.

Give search engines two real pages

• A canonical URL per language, and hreflang alternates that point at each other.
• Separate title, description, and structured data for each language, written for that language rather than translated from a template.
• Both languages in the sitemap, and both prerendered to static HTML so crawlers that do not run JavaScript still see the content.

Common mistakes

• Translating the text but leaving the layout left-to-right.
• One shared page title for both languages.
• Only testing in a desktop browser with an English keyboard.

How we do it

This website is built this way: locale-aware routes, one component set that renders in both directions, per-language metadata and JSON-LD, and a build step that prerenders every route in both languages. Right-to-left support was a requirement from the first screen, not a later patch.