Bilingual Arabic and English website: an RTL build checklist

A bilingual Arabic and English website for Saudi Arabia should treat Arabic as a first-class language, not a translation layer. That means a true right-to-left layout, Arabic typography that reads well on mobile, forms that accept both scripts, and a content process that keeps both versions in step. This checklist covers the design, build and testing decisions that separate a proper bilingual site from a mirrored English one.

Should Arabic or English be the default language?

For most sites aimed at Saudi customers, Arabic should be the default or at least an equal first choice. Decide based on who buys from you, then design for that language first.

A government supplier, a consumer brand or a clinic will often lead with Arabic. A company selling mainly to multinational procurement teams might lead with English. Whichever you pick, give each language its own URL, such as a path prefix for Arabic and another for English, and let visitors switch language on any page and land on the equivalent page, not the home page. Remember the visitor's choice so they are not switched back on every visit.

What does a proper right-to-left layout involve?

A proper RTL layout mirrors the whole interface, not only the text alignment. Navigation, sidebars, progress steps, carousels and icons that point in a direction all need to flip.

• Set the page language and direction in the HTML so browsers and screen readers handle Arabic correctly
• Use CSS logical properties (start and end rather than left and right) so one stylesheet serves both directions
• Mirror arrows, back buttons, breadcrumbs and sliders; do not mirror logos, media controls, clocks or phone numbers
• Check tables, charts and timelines, which often keep a left-to-right reading order inside an RTL page
• Handle mixed text, such as an Arabic sentence containing a product code, an English brand or a price
• Review every component in both directions at mobile, tablet and desktop widths

Building with logical properties from the first line of code is far cheaper than retrofitting RTL later. If you are starting a new site, make this a requirement in the brief. Our web development service builds both directions from one codebase.

How should Arabic typography be handled?

Choose an Arabic typeface designed for screens and pair it with a Latin face of similar weight and height. Arabic text usually needs a slightly larger size and more generous line height than English to stay readable.

Avoid fonts that only look good in headlines. Body copy, form labels and small print on mobile are where poor Arabic fonts fail. Check that the font includes the characters you need, such as Arabic-Indic digits if you use them, and that letters join correctly in every weight. Load only the weights you use, because large Arabic font files slow pages down, particularly on mobile data.

What about numbers, dates, currency and forms?

Decide on formats once and apply them consistently. Mixed number styles, unclear dates and forms that reject Arabic input are among the most common complaints on bilingual sites.

• Pick Western or Arabic-Indic digits for Arabic pages and use them consistently, keeping phone numbers and codes easy to copy
• Show prices in SAR in a format customers recognise, with VAT at 15% displayed as your adviser requires
• Offer Hijri dates where your audience expects them, alongside Gregorian dates for clarity
• Accept Arabic and English characters in name and address fields, and store them without corrupting either
• Validate Saudi mobile numbers in the formats people actually type, with and without the country code
• Keep error messages, confirmations and emails in the visitor's chosen language
• Make sure search on the site finds Arabic words regardless of small spelling variants

Forms deserve particular attention because they are where leads and sales happen. Test them with real Arabic names and addresses, and check that the data arrives cleanly in your CRM or email.

How do you keep two languages in sync?

Plan the content workflow before launch. Without one, the English site gets updated, the Arabic site falls behind, and visitors find different information depending on language.

Use a content management system that links each Arabic page to its English equivalent and shows editors which translations are missing or out of date. Write Arabic content with a fluent writer rather than relying on raw machine translation; the tone and terms Saudi readers expect are different from a literal translation. Agree a glossary of product and service names so both languages use the same terms every time.

Search engines need help too. Each language version should declare its alternate with hreflang tags, have its own title and meta description, and be written for how people search in that language. That topic deserves its own plan, and our SEO and SEM service covers it.

What should you test before launching a bilingual site?

Test every page and journey in both languages on real phones. Many RTL problems only appear on small screens or in specific browsers.

For example, a property developer launching a bilingual site might find that the Arabic enquiry form works on desktop but the phone field flips the digits on some mobile browsers, or that the floor-plan gallery slides the wrong way in Arabic. Both issues are small to fix before launch and frustrating to discover through lost enquiries afterwards.

• Language switcher keeps the visitor on the equivalent page
• No English text left in Arabic pages, including buttons, alerts, emails and PDFs
• Page speed checked on mobile data with Arabic fonts loaded
• Accessibility checked with a screen reader in both languages
• Forms, payments and confirmation emails tested end to end in both languages
• Privacy notice and cookie banner available in Arabic and English, reflecting the Saudi Personal Data Protection Law (PDPL) as confirmed with your legal adviser

How is a bilingual website project usually run?

The project follows a clear sequence: discovery, written scope, design in both directions, phased build, testing and handover.

Discovery happens in video-call workshops where we agree audiences, the default language, page structure and who writes Arabic content. The result is a written scope listing pages, components, integrations and content responsibilities. A named lead engineer leads delivery in two-week sprints, with a demo every sprint showing pages in both Arabic and English, so your team reviews RTL behaviour early rather than at the end.

Releases are phased: core pages and forms first, then secondary sections. Testing covers both languages, devices and browsers. At handover the code, CMS and hosting accounts are registered to your company, and editors are trained on the bilingual workflow. Read more on our web development company page for Saudi Arabia.

What drives the cost of a bilingual website?

The number of unique page templates, the amount of content to write in Arabic, and integrations such as payments, CRM or booking drive cost more than the second language itself. Custom animations and complex components also take longer to mirror and test. Ask for estimates that separate design, build, content and testing so you can see where the effort goes.

Frequently asked questions

Can we add Arabic to our existing English website?

Often yes, but it depends on how the site was built. If the CSS uses fixed left and right positioning throughout and the CMS has no language support, a rebuild may cost less than a retrofit. A short technical review will tell you.

Should Arabic URLs use Arabic characters?

Both approaches work technically. Arabic-script slugs can match search terms, while transliterated or English slugs are easier to share and type. Pick one approach and use it consistently.

Is machine translation good enough for the Arabic version?

It can help draft content, but a fluent Arabic writer should review and adapt every page. Customers notice awkward Arabic quickly, and it affects trust.

Do we need separate designs for each language?

No. One design system with components built for both directions is the efficient route, with a review of each layout in Arabic before build.

If you are planning a new bilingual site or fixing an Arabic version that never quite worked, talk to us and we will review it with you.