A bilingual website is not one design translated — it is two reading directions, designed deliberately. The toggle must be findable and land on the same page in the other language, components must mirror where reading direction demands it and never where meaning would flip, Arabic type needs its own font, size and line-height, and English names, prices and numbers inside Arabic text must render in the right order. Specify those four layers and the Arabic half stops looking bolted on.
The short answer: design two reading directions, not one design translated
English reads left to right; Arabic reads right to left, and visitors scan, tap and judge in their reading direction. So the Arabic version needs a header switcher labelled in Arabic script, navigation following the mirrored flow, a real Arabic typeface set slightly larger with more line-height than the English, and explicit handling for Latin items — brand names, URLs, prices — inside Arabic sentences. Most visible failures on UAE bilingual sites are design failures, not translation ones.
The problem: Arabic bolted onto an English layout
The pattern is familiar: a site launches in English, performs well, and Arabic is added later as a translation layer. The toggle is a small "AR" link in the footer, or drops the reader on the Arabic homepage. Spacing built with physical left/right margins collapses when mirrored. Arabic text renders in a fallback font at the English size, cramped and faint. Then a price or phone number inside an Arabic paragraph appears in the wrong order, and the page reads as broken.
Each has a fix you can specify and check.
The language toggle: placement, labelling and landing on the equivalent page
Put the switcher where visitors look for menu actions: the header, visible without scrolling. On mobile it belongs in the header bar or top of the menu. Label it in the language it switches to: the Arabic option should read in Arabic script, not "AR", because the person looking for it may not read the current page at all.
The landing rule matters as much as placement: switching must land on the equivalent page, not the other homepage. That works because each language has its own URL — the one structural fact from Google Search Central's localized-versions guidance a designer needs; URL and hreflang mechanics belong to our guides to SEO for bilingual Arabic–English websites and multilingual website architecture. Keep the toggle's position mirrored with the header in both directions.
Mirrored layouts: what flips, what must never flip (table)
Mirroring follows reading flow, not a blanket flip. Anything expressing sequence or reading order mirrors; anything expressing real-world direction, time or brand identity does not.
| Element | Mirror in RTL? | Why |
|---|---|---|
| Navigation order, menus, breadcrumbs | Yes | Reading sequence reverses |
| Text alignment and paragraph flow | Yes | Arabic reads right to left |
| Back / next and progress arrows | Yes | "Forward" follows reading flow |
| Form field order and label placement | Yes | Forms complete in reading order |
| Logos and brand marks | No | Brand identity never flips |
| Numbers, prices, phone numbers | No | Numerals keep their internal order |
| Media controls and clocks | No | Their direction is physical |
| Photos of products, places, people | No | Mirroring falsifies the scene |
Build the mirror with direction-aware spacing — CSS logical properties such as margin-inline-start (MDN) follow the page direction automatically — rather than hard-coded left/right values. Code-level detail sits in our RTL website design checklist; never approve a screen seen in one direction only.
Navigation, icons and imagery in RTL: the judgement calls
Navigation mirrors: the first English menu item becomes the rightmost in Arabic, dropdowns open in reading direction, and the search icon stays next to its field. Arrows meaning "continue" or "back" mirror, as they encode reading direction. Arrows pointing at something physical — a map direction, a door — do not.
Imagery is the quiet trap: a photo of your premises, team or product must never be mirrored — signage, handedness and room layouts would become false. A designed graphic may need a mirrored variant — brief it as a separate asset, not a flipped file, since embedded text rarely survives mirroring.
Arabic typography: font pairing, size and line-height next to English
Arabic script has different proportions from Latin: letterforms carry dots and marks above and below, and read as visually smaller at the same point size. Setting Arabic in a Latin fallback — or at English size in a proper Arabic face — makes it look weak beside the English. Compensate: choose a screen-designed Arabic family, set body text slightly larger than the English, and give it more line-height.
Google Fonts carries screen-ready Arabic families with official specimen pages — Noto Kufi Arabic and IBM Plex Sans Arabic for a structured feel, Cairo and Tajawal for a cleaner tone. Pair by character, not by name: a geometric English sans suits Kufi-style Arabic; a humanist English face sits better with Tajawal. Test the pairing on real headings, buttons and prices, where mismatch shows most.
Mixed-direction pages: English names, AED prices, phone numbers and URLs inside Arabic text
Arabic sentences routinely contain Latin-script items: a brand name, an email address, a URL, a price. The Unicode bidirectional algorithm — the rules W3C Internationalization guidance explains — decides how these runs are ordered, and numbers are its classic weak point: digits are weakly directional, so a price or phone number can jump to the wrong end of an Arabic sentence, with currency or punctuation attached to the wrong side.
Design defences are practical. Keep prices and phone numbers as intact units, never split across lines or styled fragments. Present phone numbers in the international format visitors dial, unbroken. Where a Latin item sits inside Arabic text, the markup should isolate it — the bdi element and dir attributes in W3C's guidance exist for this — so its internal order survives. Then proofread the mixed sentences: a page can pass every layout check and still scramble a price.
Forms, tables and dashboards in two directions
Forms are completed in reading order, so field sequence, label placement and error messages mirror with the page — our Arabic form design guide for the UAE covers the detail. Inputs for emails, URLs and phone numbers stay left-to-right internally even on an Arabic page, because that is how those strings are written. And number alignment in tables should be set per column, so quantities and prices align consistently in both versions.
Bilingual design QA: the phone test before sign-off (checklist)
Run this on a real phone, in Arabic, before sign-off — the pre-launch companion is our Arabic RTL website checklist. One, find the toggle within three seconds from a deep page, and confirm it lands on the same page in Arabic. Two, scroll three pages checking spacing, alignment and icons against the mirror table. Three, read every mixed-direction sentence aloud: prices, phone numbers, brand names. Four, compare Arabic and English type at body size — Arabic should look equal in presence, not smaller. Five, complete the longest form in Arabic, including an error state. Six, switch back and repeat in reverse. Any failure is a design fix, not a translation note.
Common mistakes
The most common mistake is approving the Arabic version from desktop screenshots, when most visitors meet it on a phone. Next: labelling the toggle only in the current language; mirroring everything with one global flip, including logos and photographs; setting Arabic at the English size in a fallback font; splitting a phone number or price across styled fragments; and treating the Arabic homepage as the only designed Arabic page.
FAQ
Where should the language switcher go on a mobile bilingual website?
In the header bar, or at the top of the mobile menu — visible without scrolling or hunting. Label the Arabic option in Arabic script, so it can be recognised by someone who cannot read the current page, and land it on the equivalent page, not the other homepage.
What should never be mirrored in an RTL layout?
Logos and brand marks, numbers and prices, media controls and clocks, and photographs of real products, places and people — mirroring any of these falsifies meaning or identity. What mirrors is anything expressing reading sequence: navigation order, text flow, form order, forward/back arrows.
Which Arabic fonts pair well with English website text?
Screen-designed families on Google Fonts are the safe starting point: Noto Kufi Arabic or IBM Plex Sans Arabic beside a structured English sans, Cairo or Tajawal beside a cleaner neutral one. Set Arabic slightly larger, with more line-height.
Why do prices and phone numbers appear scrambled in Arabic text?
Because of the bidirectional algorithm that orders mixed-direction text. Digits are weakly directional, so inside a right-to-left sentence a number run — and nearby punctuation or currency — can display at the wrong end. Keeping the price or number as one intact, isolated unit prevents most cases.
Should the Arabic version of a page have its own URL?
Yes. Each version needs its own URL — that is what lets the toggle land on the equivalent page, and what search engines require to index both versions. URL structure and hreflang are covered by our bilingual SEO and architecture guides.
Brief a bilingual design that reads natively both ways (CTA)
If your Arabic pages were bolted onto an English design, the fix is a design specification, not another round of translation: toggle placement and landing behaviour, a mirror sheet, a paired Arabic type scale, and mixed-direction rules for prices and numbers, accepted through a phone test. WebStackRank designs bilingual sites for the UAE market with that layer specified from the start. See our approach to web design in the UAE — and bring your current Arabic pages.
