Building bilingual Arabic and English websites and apps: an RTL checklist

In Qatar and across the Gulf, many customers switch between Arabic and English several times a day. A website or app that treats Arabic as an afterthought, with broken layouts, awkward fonts or half-translated screens, quickly loses their trust. Building a bilingual Arabic and English product well is not difficult, but it has to be planned from the start. This checklist covers what to get right.

Layout and right-to-left (RTL)

Arabic is read from right to left, so the whole interface should mirror, not just the text.

Set the direction on the page. Use dir="rtl" and lang="ar" on Arabic pages so browsers, screen readers and search engines handle them correctly.
Use logical spacing. Write styles in terms of “start” and “end” instead of “left” and “right”, so the same layout mirrors automatically.
Mirror navigation and progress. Menus, back buttons, breadcrumbs, sliders and step indicators should follow the reading direction.
Flip directional icons only. Arrows and chevrons should point the other way in Arabic. Logos, media play buttons, clocks and checkmarks should not.
Check tables and forms. Column order, label alignment and error messages should all read naturally in Arabic.

Typography

Choose a proper Arabic typeface. Latin fonts with basic Arabic support often look thin or poorly spaced. Use a font designed for Arabic, with matching weights for headings and body text.
Allow more line height. Arabic letters have taller ascenders and descenders, so text needs more vertical space.
Avoid letter spacing and all-caps styles. Arabic letters connect; extra spacing breaks words apart, and uppercase does not exist.
Test real content. Arabic text is often a different length from English. Design with real translations, not placeholder text.

Numbers, dates and currency

Pick one digit style. Decide whether to show Western digits (0 to 9) or Eastern Arabic digits (٠ to ٩) in Arabic, and use it consistently.
Format dates for the locale. Month names, order of day and month, and calendars should match what users expect. If you show Hijri dates, test them carefully.
Show prices clearly. Display amounts in the local currency consistently, for example “QAR 250” in English and “250 ر.ق” in Arabic. If you sell in more than one GCC country, always show which currency applies.
Keep phone numbers readable. Numbers such as +974 phone numbers should stay left-to-right inside Arabic text.

Content and translation

Translate, then localise. A literal translation often sounds unnatural. Use a translator who writes for your audience, and review key pages with native speakers.
Keep both languages complete. Every page, button, email, SMS and error message needs both versions. Missing translations are one of the most common complaints.
Write Arabic alt text. Image descriptions should be in the page’s language for accessibility and search.
Let users choose. Provide a clear language switcher that keeps them on the same page, and remember their choice.

SEO for two languages

Give each language its own URL. For example /services and /ar/services, rather than switching language with cookies.
Add hreflang tags. They tell search engines which page is the Arabic or English version of the same content.
Translate titles and meta descriptions. Each language needs its own, written for how people actually search in that language.
Include both versions in the sitemap. This helps search engines discover all your pages.

Testing

Test every screen in Arabic on real phones, not just in the browser on a desktop.
Check forms with Arabic input, including names, addresses and mixed Arabic and English text.
Test with a screen reader in both languages.
Review emails, PDFs, invoices and notifications, not only the website.

Questions to ask your development team

Is the design system built for right-to-left from the start?
Which Arabic typeface will we use, and is it licensed for web and app use?
How will translations be managed and updated?
How will we test Arabic screens before each release?

For more on choosing a team, read 7 questions to ask your mobile app development partner, or see how much custom software costs.

How QCode can help

QCode designs and builds bilingual websites and apps that feel native in both Arabic and English. Learn more about our software development services or tell us about your project.