An Arabic version is not the English site with translated words poured into the same layout. These are the right-to-left mistakes that lose the reader in the first two seconds, and what to test before launch.
Arabic website design and RTL: the short answer
An Arabic version of your site is not the English site with translated words poured into the same layout. Right-to-left means the whole interface mirrors: navigation, logo position, form labels, progress steps, arrows, and the corner a Gulf visitor's eye lands on first. The mistakes that cost you the enquiry are structural rather than linguistic, and most of them are visible within two seconds of the page loading. Set the document direction correctly, mirror the layout with logical CSS rather than hand-flipped margins, choose a typeface actually designed for Arabic, and decide deliberately which numerals to show.
Get those four right and an imperfect translation is survivable. Get them wrong and a perfect translation still reads as a foreign site that was not built for the reader. It is also a smaller field than most exporters assume: according to W3Techs, Arabic accounted for 0.6 percent of the websites it surveys in September 2026 against 49.5 percent for English, so a properly built Arabic presence still stands out in markets where most competitors have none.
Mirroring is a layout decision, not a text alignment
The most common failure is a site that sets text alignment to the right and calls the job done. Direction belongs on the document: the dir and lang attributes on the html element, so the browser applies the Unicode bidirectional algorithm and every child element inherits the correct flow. From there the layout itself has to mirror. The logo and primary navigation move to the right, the sidebar swaps sides, breadcrumbs run right to left, and a three-step progress bar starts at the right.
Not everything mirrors, which is where hand-flipped stylesheets go wrong. Logos with Latin wordmarks stay as drawn. Media player controls, clocks and anything representing a physical object keep their orientation. Numbers, phone numbers and Latin brand names run left to right inside the right-to-left flow, which is the bidirectional algorithm working as designed rather than a bug. The test is meaning: an arrow that means forward should point left in Arabic, while an arrow that means download still points down.
Arabic type breaks every Latin habit you have
Arabic is cursive and connected, letters change shape according to their position in a word, and the script carries more visual weight above and below the baseline than Latin does. Three consequences follow. Arabic set at the same pixel size as your English looks small and cramped, so most designers step the size up and increase line height to give the ascenders and descenders room. There is no bold or italic in Arabic in the Latin sense: faux-bolding a font that ships no bold weight smears the letter joins, and synthetic italics simply look broken. Emphasise with a heavier weight the family actually contains, with colour, or with position.
The font choice is not cosmetic either. A system fallback renders your Arabic in whatever the device happens to have, which is why so many Gulf-facing sites end up looking like a government form. Pick a family with a real Arabic cut and matching weights, and check it at heading and body size on an actual phone before anyone signs off.
Arabic website design RTL: numerals, dates and the forms that leak
Numerals are where confident teams get caught. Arabic is written with two digit sets: the Arabic-Indic digits common across the Gulf and the Levant, and the Western digits used across most of North Africa. According to the W3C's Arabic and Persian layout requirements work, internationalisation libraries treat Arabic-Indic digits as the default for Arabic text while excluding several North and North-West African countries, which use the Western set. There is no universally correct answer, only a decision you make per market and apply consistently. Prices in one set and phone numbers in the other, on the same page, is the version that reads as careless.
Dates and currency follow the same rule: choose the locale, then let a formatting library render the value instead of concatenating strings by hand. Forms are the other leak. Labels and placeholders align right, but email fields, URL fields and international phone numbers must accept and display left-to-right input, or the plus sign and country code land in the wrong place. Before launch, complete one real form with an Arabic name, an Arabic address and a Gulf mobile number, and do it on a phone rather than only on a desktop.
The RTL checks to run before launch
- Direction at the root. Set the direction and language attributes on the html element of every Arabic page, not as a class on one container. Then confirm that hreflang tags point each language version at all the others, so search engines serve the Arabic page to the Arabic query.
- Logical CSS instead of a mirrored stylesheet. Replace left and right margins and padding with their inline-start and inline-end equivalents, and use logical inset properties rather than left and right. One stylesheet then serves both directions, and the Arabic site stops drifting out of sync every time the English one changes.
- Icons and motion audited one by one. Arrows, chevrons, carousels, sliders and swipe gestures reverse; play buttons, checkmarks and clock faces do not. Animations that enter from the left in English should enter from the right in Arabic.
- Real content, never placeholder text. Translated Arabic strings are sometimes shorter than the English source and sometimes considerably longer, so buttons, navigation items and card titles have to be tested with the actual words at mobile width.
- A native reader on the live site before launch. Not a proofread of a text file, but a walk through the real pages on a phone. Machine translation produces sentences that parse and still sound like nobody in Riyadh, Dubai or Doha.
Arabic website design and RTL: common questions
- Is setting the direction attribute to rtl enough to make a website right-to-left? — No. It sets the text direction and lets the browser run the bidirectional algorithm, but the layout still has to mirror: navigation, sidebars, icons, progress indicators and any spacing written with left and right values. Building with CSS logical properties makes that mirroring automatic rather than manual.
- Which numerals should an Arabic website use? — It depends on the market. Arabic-Indic digits are the convention across the Gulf and the Levant, while most of North Africa uses Western digits, a split reflected in the W3C's Arabic layout requirements work. Choose one per market and apply it consistently to prices, dates and phone numbers.
- Do I need a separate Arabic website or a language version of my existing one? — A language version, provided the underlying layout was built with logical properties and the content model supports both directions. Separate sites drift apart within a year and their hreflang tags get neglected, so search engines stop serving the right version.
- Why does my Arabic text look wrong even though the translation is correct? — Usually the typeface. A family without a proper Arabic cut is being faux-bolded or quietly replaced by a system fallback, which breaks the letter joins. Set an Arabic-capable font, raise the size and line height relative to the Latin, and never apply synthetic bold or italic.
Keep reading
Build something
worth trusting.
Tell us what's slowing your business down. We'll show you the system that fixes it — and how fast.