A large share of the bilingual websites we are asked to rebuild have an Arabic version that was clearly added late: text overflowing its containers, arrows and chevrons pointing the wrong way, forms that read awkwardly, and a language switch that dumps you back on the homepage. None of this is hard to avoid. It comes down to treating Arabic and English as equal from the first wireframe rather than translating an English design at the end.
Bilingual is a design decision, not a translation step
Right-to-left is not a filter you apply to a finished layout. It changes reading order, visual hierarchy, and the direction of almost every directional cue. Deciding early that the site is bilingual means the grid, the components, and the content model are all built to work both ways, so adding or updating a page stays simple.
Mirror the layout with CSS logical properties
What flips in a right-to-left layout
- Navigation order, logo position, and the side the sidebar sits on.
- Text alignment and the start edge of every block.
- Back and forward arrows, carousel controls, breadcrumb separators, and progress steppers.
- Icons that imply direction — send, next, external-link — while symmetrical icons stay as they are.
- Tables: the first column moves to the right; numeric columns still align sensibly.
The maintainable way to handle this is CSS logical properties: use margin-inline-start instead of margin-left, inset-inline-end instead of right, and text-align: start instead of left. Set dir="rtl" on the html element for Arabic and a single stylesheet serves both directions, with only a few genuinely direction-specific rules left to write by hand.
Arabic typography that reads well on screens
- Choose a typeface drawn for Arabic screen text, not a Latin family with a bolted-on Arabic fallback.
- Give Arabic body text a little more line height and often a slightly larger size to match the visual weight of the Latin text next to it.
- Never italicise or artificially slant Arabic — it distorts the letter joins. Use weight, colour, or size for emphasis.
- Check that numerals, punctuation, and any mixed Arabic-Latin phrases sit correctly on the line.
- Test headings and buttons with real Arabic copy, which is frequently longer than the English.
Forms, dates, numbers, and inputs
Forms are where a rushed bilingual site feels most foreign. A few specifics matter:
| Element | Common English default | Arabic expectation |
|---|---|---|
| Field labels and help text | Left-aligned, label above input | Right-aligned; layout mirrored |
| Phone and account numbers | Left-to-right entry | Digits stay left-to-right even within RTL text |
| Dates | Gregorian only | Gregorian, often with Hijri shown alongside |
| Validation messages | Appear to the left / start | Appear on the mirrored start edge, correctly aligned |
| Buttons | Sized for short English verbs | Sized for longer Arabic phrasing without wrapping |
Bilingual SEO and the language switcher
- Give each language its own indexable URLs — for example /ar/ and /en/ paths, or separate subdomains — not a single URL that swaps text with JavaScript.
- Add hreflang annotations linking each page to its counterpart in the other language, plus an x-default.
- Write titles, meta descriptions, and headings natively in each language rather than machine-translating them.
- Make the language switch keep the user on the same page in the other language.
- Let search engines and users land directly on either language version without a redirect to the homepage.
If organic traffic is a priority for the site, it is worth reading alongside our digital marketing and SEO work, since bilingual SEO decisions are easiest to get right during the build.
A pre-launch checklist for bilingual sites
- Every page reviewed in both directions, with real content, on mobile and desktop.
- All directional icons and controls verified in RTL.
- Forms tested end to end in Arabic, including validation and error states.
- hreflang and canonical tags checked with a crawler.
- Language switch tested from deep pages, not just the homepage.
- Screen-reader pass in both languages; lang attributes set correctly on mixed content.
How Thiqatech approaches Arabic-first web work
We build the RTL layer into the component library from the start, so bilingual behaviour is the default for every new page rather than a retrofit. Content models are structured so each language is edited independently, and SEO fundamentals — URLs, hreflang, native metadata — are set during the build. See website design and development for scope, or the digital transformation roadmap if the website is part of a wider programme.
