Building Bilingual Arabic and English Apps: What Right-to-Left Support Actually Takes

Several products in our library work in both Arabic and English, or in Arabic alone. They include a tourist attractions discovery app, a home services marketplace, a car wash booking platform, a membership portal for an association, a fully Arabic back-office tool and a multi-language consulting website. The lesson we have learned repeatedly is that supporting Arabic properly is not a translation task. It is a layout task that also involves translation.

Right-to-left is a layout system

Arabic is written right to left, and a good Arabic interface mirrors the whole layout, not just the text. Navigation moves to the other side, back arrows point the other way, lists align to the right and progress runs from right to left.

The W3C explains the underlying HTML mechanism in its guidance on structural markup and right-to-left text: the direction of the document is declared once, and the layout follows it. The job of the developer is to make sure every screen actually follows it.

Think in start and end, not left and right

The most useful habit is to stop writing "left" and "right" in layout code. On the web, CSS logical properties such as margin-inline-start and padding-inline-end describe direction relative to the reading direction, as documented on MDN's logical properties guide. A layout written this way flips correctly with no extra work.

Mobile frameworks have the same concept. Building with start and end from the first screen is far cheaper than finding and fixing every hard-coded "left" later.

Some things must not flip

Mirroring everything is also wrong. Some elements keep their direction in a right-to-left interface:

• Numbers and phone numbers read left to right, even inside Arabic text.
• Media controls such as play and fast-forward keep their conventional direction.
• Brand logos and some icons that are not directional.
• Code, emails and URLs stay left to right.

Getting these right is what separates an interface that feels native from one that feels mechanically flipped.

Translation is still work

Beyond layout, bilingual products need translation handled properly:

• Keep every string out of the code, in translation files, from the start.
• Allow for text length differences: a label that fits in English may wrap in Arabic, and the reverse.
• Choose fonts that render Arabic well at small sizes, not just the Latin font's fallback.
• Handle dates, numbers and currency formats per language.

Mobile apps

The tourism discovery app has full Arabic and English localisation with right-to-left support, alongside dark mode and push notifications. The home services marketplace and the car wash booking platform also ship bilingual mobile experiences. On mobile, the app has to switch direction correctly when the language changes, and every custom component needs checking in both directions.

Admin panels and portals

Back-office tools are often left in English even when the people using them work in Arabic. We think that is a mistake. The association's member portal is aware of right-to-left layout, and the small merchant tool we built has a fully Arabic admin experience. The people using a tool every day are the ones it most needs to serve, as we discuss in the deposit tracker write-up.

Websites and search

For websites, each language should have its own URL so search engines can index both versions. The consulting website uses locale-based routing, with next-intl in Next.js, so that multi-language pages are properly indexable. Serving two languages from one URL, switched by a cookie or script, tends to leave one language invisible to search. How a page is rendered matters just as much, as we found when adding prerendering to a travel platform.

A checklist for bilingual Arabic and English products

• Declare direction once and let layouts follow it.
• Write layout with start and end, never left and right.
• List the elements that must not mirror, and test them.
• Keep all strings in translation files from day one.
• Test every screen in both languages and both directions.
• Give each website language its own URL.

You can read the anonymised write-ups for the tourism app, the home services marketplace and the consulting website. Adding a language to an existing product is a common request in our product improvement work.