# Arabic and multilingual websites built right-to-left from the start

> Bilingual and trilingual websites in Arabic, English and French with true RTL layouts, fast Arabic fonts, correct hreflang and native-speaker review.

We build bilingual and trilingual websites in Arabic, English and French for the Middle East, North Africa and Canada. Every build gets a true right-to-left layout, Arabic fonts that load fast on mobile, language versions that link to each other and search engines can tell apart, and review by native speakers before launch.

## Common problems

- **Arabic as a mirrored afterthought:** Flipping an English template with a single CSS rule leaves misaligned spacing, backwards arrows, broken forms and phone numbers that read in the wrong order.
- **Fonts that look wrong or load slowly:** Default system fallbacks, poorly hinted Arabic typefaces and oversized font files make text hard to read on phones and slow down every page.
- **Language versions search engines can't match:** Missing or broken hreflang, one URL serving several languages and switchers that dump visitors on the homepage split ranking signals and frustrate users.
- **Machine translation nobody checked:** Literal translations, mixed dialects and French that ignores local usage read as careless to the people you most want to reach.

## What's included

- **True RTL layout system:** Correct dir and lang attributes, CSS logical properties instead of left and right, and components designed and tested in both directions.
- **Mirrored navigation and icons:** Menus, breadcrumbs, carousels and directional icons that flip for Arabic, with logos, media controls and other fixed icons left as they are.
- **Bidirectional text handling:** Isolation for numbers, prices, phone numbers, email addresses and Latin brand names inside Arabic sentences, so mixed text reads in the right order.
- **Arabic web font setup:** Typefaces chosen for screen legibility, subset WOFF2 files, sensible line height and font-display rules, so Arabic text renders well and loads fast.
- **URL and slug strategy:** A clear decision on language folders, transliterated or Arabic-script slugs and consistent URL patterns for every language version.
- **Hreflang clusters:** Reciprocal hreflang annotations for each language and market pair, plus x-default, generated from templates so they stay correct as pages are added.
- **Linked language switcher:** A switcher that takes visitors to the equivalent page in the other language, remembers their choice and never forces a redirect based on IP alone.
- **Local formats and contact options:** Hijri and Gregorian dates where useful, local number and currency formats, and WhatsApp click-to-chat alongside forms and phone links.
- **Native-speaker review:** Arabic and French copy reviewed by native speakers for tone, terminology and regional usage before launch, not just checked for spelling.

## What we get right in Arabic, English and French builds

Multilingual sites succeed or fail on details that are easy to miss in a single-language design review. These are the areas we plan and test on every build.

- **Direction set at the document level:** The html element carries the right lang and dir values for each language, so browsers, screen readers and search engines all read the page correctly.
- **Logical CSS properties:** Margins, padding, borders and alignment use start and end rather than left and right, so one stylesheet works in both directions.
- **Icons that should and shouldn't flip:** Back and next arrows, progress steps and list bullets mirror. Logos, play buttons, checkmarks, clocks and charts generally stay as designed.
- **Numbers in Arabic text:** We agree on Western or Eastern Arabic digits per market and isolate phone numbers, prices and dates so they never reverse inside a sentence.
- **Hreflang by market:** Clusters such as ar-AE and en-AE, ar-SA and en-SA, ar-MA and fr-MA, or en-CA and fr-CA, each pointing to the right equivalent page.
- **Hijri and Gregorian dates:** Where your audience expects it, dates can show the Hijri calendar alongside the Gregorian one, formatted correctly for each locale.
- **French for Quebec:** Canadian French terminology and a French experience at least as complete as the English one, in line with Quebec's language rules.
- **French for the Maghreb:** French written for Morocco, Algeria and Tunisia, often paired with Arabic, with local phrasing and formats rather than copy written for France.

## The first 90 days

### Weeks 1–2: Plan languages and markets

- Markets, languages and page equivalents agreed
- URL, slug and hreflang structure documented
- RTL design rules, fonts and icon behavior defined

### Build or remediate: Build in both directions

- Templates built with logical properties and tested in LTR and RTL
- Bidirectional text, dates, numbers and forms handled
- Copy translated, adapted and reviewed by native speakers
- Hreflang, sitemaps and language switcher implemented

### Launch and after: Go live and monitor

- Hreflang, indexing and redirects checked on the live site
- Mobile rendering and font loading tested on real devices
- Search Console monitored for language and market issues

## What we report

- Hreflang errors and missing return tags
- Indexed pages per language version
- RTL layout defects found in device testing
- Core Web Vitals on Arabic and French templates
- Font file weight and text render time on mobile
- Language switcher links resolving to equivalent pages
- Organic traffic and leads by language and market

## True RTL versus a mirrored-only build

|  | Mirrored-only | True RTL build |
| --- | --- | --- |
| Layout | Whole page flipped with one CSS rule | Logical properties and components tested in both directions |
| Icons | Everything flips, including logos and media controls | Only directional icons flip |
| Mixed text | Numbers, prices and Latin words can appear out of order | Bidirectional text isolated and tested |
| Fonts | System fallback or one heavy file | Screen-tested Arabic typeface, subset and preloaded |
| Search | One URL or no hreflang between versions | Separate URLs with reciprocal hreflang clusters |

## Why Arabic websites need more than a mirrored template

Most Arabic websites that feel wrong were built in English first and flipped at the end. A single direction rule moves the logo and menu to the right, but it leaves behind hard-coded margins, arrows pointing the wrong way, sliders that move backwards and form labels that sit on the wrong side of their fields. Visitors notice within seconds, and in markets where Arabic is the first language, that impression shapes trust in the business.

We build Arabic and multilingual websites with both directions in mind from the first wireframe. The html element carries the correct lang and dir values for each language. Stylesheets use CSS logical properties, such as margin-inline-start and padding-inline-end, so one set of components works in both left-to-right and right-to-left layouts. Every template is designed, built and tested in Arabic as well as English or French, not converted after sign-off.

## Bidirectional text, numbers and brand names

Arabic pages rarely contain only Arabic. Prices, phone numbers, dates, product codes, email addresses and Latin brand names all appear inside right-to-left sentences, and without care they can display out of order. A phone number that reverses or a price whose currency sign jumps to the wrong side is more than a cosmetic bug.

We isolate mixed-direction content in the markup, set input fields to the direction their content needs, and agree per market whether to use Western digits or Eastern Arabic digits. Icons get the same attention. Directional icons such as back and next arrows mirror, while logos, play buttons, checkmarks and most charts stay as designed.

## Arabic fonts that read well and load fast

Arabic script has connected letters, diacritics and taller ascenders and descenders than Latin text, so it needs typefaces designed for screens and more generous line height. We choose fonts that stay legible at small sizes on phones, subset them to the characters you actually use, serve compressed WOFF2 files and preload only what the first screen needs. The result is text that looks right without slowing pages down, which matters for Core Web Vitals and for visitors on mobile data.

## URLs, hreflang and language switchers

Search engines need a separate, crawlable URL for each language version and a clear signal about how those versions relate. We agree a structure early, usually language or market folders, and decide whether Arabic slugs use Arabic script or transliteration. Then we build hreflang clusters from page relationships in the CMS, with codes such as ar-AE and en-AE for the UAE, ar-SA for Saudi Arabia, ar-MA and fr-MA for Morocco, and en-CA and fr-CA for Canada, plus an x-default.

The language switcher links each page to its true equivalent rather than the homepage, and we never force visitors into a language based on IP address alone. Our [international SEO](/services/international-seo/) team handles market-level keyword research, so each version targets the terms people actually search in that language.

## Middle East, North Africa and Canada

For the Gulf, the Levant and Iraq, most sites pair Arabic with English, and local details matter: WhatsApp contact options, Hijri dates for events and seasonal campaigns, and copy that reads naturally rather than as a literal translation. See our [Middle East](/regions/middle-east/) market notes for more on how search behaves across the region.

In [North Africa](/regions/north-africa/), French often sits alongside Arabic, particularly in Morocco, Algeria and Tunisia. We write French for those audiences rather than reusing copy written for France, and plan the language order around how your customers actually browse. In Canada, English and French versions need to be equally complete. Quebec's Charter of the French Language, strengthened by Bill 96, sets expectations for French on commercial websites, and we build French versions with that in mind while recommending you confirm the details with a legal adviser.

## Adding languages to an existing site

If you already have a website, adding Arabic or French can be part of a [website revamp](/services/web-development/website-revamp/). A Refresh redesigns and extends the site on your current platform when its templates and CMS can support a second direction. A Rebuild moves you to a modern stack when they can't. Either way, SEO is built in from the start: language versions are crawlable, redirects protect existing rankings, and native speakers review the copy before anything goes live. We scope and quote every project in USD after a free website review.
## FAQ

### What is an RTL website?

An RTL website displays content right to left, as Arabic is read. A proper RTL site does more than align text to the right. Navigation, layout order, form fields, tables and directional icons all mirror, while numbers, Latin words and certain icons keep their natural direction. The page's lang and dir attributes tell browsers and assistive technology how to handle it.

### Can you add Arabic to our existing English website?

Often, yes. If the current site is built with CSS logical properties and a CMS that supports multiple languages, adding Arabic can be a Refresh project on your current platform. If the templates hard-code left and right everywhere or the CMS handles languages poorly, a Rebuild on a modern stack is usually cheaper over time. We tell you which after reviewing the site.

### Which languages do you build websites in?

We deliver websites in English, Arabic and French, as single-language, bilingual or trilingual builds. That covers most projects for the Gulf, the Levant, Iraq, North Africa and Canada, and the many businesses that serve both English and French speakers or Arabic and French speakers.

### Should Arabic URLs use Arabic script or Latin letters?

Both can work. Arabic-script slugs are valid, display correctly in modern browsers and match how people search, but they turn into long encoded strings when copied into some apps and emails. Transliterated or English slugs are easier to share and manage. We choose per site based on your markets, CMS and how URLs will be shared, then apply the rule consistently.

### How do you set up hreflang for Arabic, English and French?

Each language and market version gets its own URL, and every version lists all of its equivalents, including itself, with codes such as ar-AE, en-AE, ar-SA, fr-MA, fr-CA or en-CA, plus an x-default. The annotations must be reciprocal, so we generate them from page relationships in the CMS rather than adding them by hand.

### Do we need separate versions for each Arabic-speaking country?

Not always. Many businesses start with one Arabic version targeting the whole region and add country versions only where pricing, products, shipping or legal content genuinely differ. Separate country pages with near-identical content add work without much benefit. We plan the structure around what actually changes between markets.

### Does a French website for Quebec have legal requirements?

Generally, yes. Quebec's Charter of the French Language, strengthened by Bill 96, requires businesses serving Quebec consumers to make commercial content, including websites, available in French, and French should be at least as available as any other language. We build French versions to that standard, but we are not lawyers, so please confirm your obligations with a Quebec legal adviser.

### Which Arabic fonts do you use?

We choose typefaces designed for screens, often from well-supported open-source families, and test them at small sizes on real phones. We subset the files to the characters you need, serve WOFF2, set appropriate line height and avoid letter-spacing, which breaks the connections between Arabic letters.

### Can the site show Hijri dates?

Yes. Where your audience expects it, for example for events, Ramadan offers or religious occasions, dates can show the Hijri calendar alongside or instead of the Gregorian one. Modern browsers can format both calendars for Arabic locales, so dates stay consistent without manual conversion.

### Do you add WhatsApp contact options?

Yes. In much of the Middle East and North Africa, many customers prefer WhatsApp to forms or email. We add click-to-chat links with pre-filled messages per language, keep forms and phone links as alternatives, and track WhatsApp clicks as conversions so you can see which pages generate enquiries.

### Who translates and reviews the content?

Copy is written or adapted by people fluent in the target language and reviewed by native speakers before launch. Review covers tone, terminology, regional usage and how text fits the layout, since Arabic and French often run longer or shorter than English and can break designs that were never tested with real copy.

### Is SEO included in multilingual builds?

Yes. IMPOSEO is an SEO and web development agency, so every build includes keyword research per language, crawlable language versions, hreflang, structured data, sitemaps and on-page optimization. We can't guarantee rankings, but the site launches with the technical foundation search engines need to understand each version.

### How much does an Arabic or multilingual website cost?

It depends on the number of languages and markets, how many templates and pages need building, whether copy needs writing or only translating, the platform, and integrations such as booking, e-commerce or CRM. Adding Arabic to a well-built site costs far less than a full Rebuild. We quote in USD after a free website review.

---
Source: https://imposeo.com/services/web-development/arabic-rtl-website-development/
IMPOSEO: SEO for Google and AI search. Contact: rank@imposeo.com. Proposals are quoted in USD after a free audit: https://imposeo.com/contact/