Arabic & RTL Website Best Practices
A complete, practical checklist for building Arabic and right-to-left websites that look right, work correctly on every device, and rank in Arabic search. Free for developers, designers and agencies.
Building an Arabic website is not just translating English text and flipping it to the right. Arabic is a right-to-left (RTL) language with its own typography, layout logic, bidirectional text rules and search behaviour. Get those wrong and the site looks broken to Arabic readers and stays invisible in Arabic search. This checklist covers everything that actually matters, in the order you should tackle it.
It is written for the UAE, Saudi Arabia and the wider GCC, where a properly built bilingual (Arabic and English) website is often the difference between a site that converts local customers and one that does not.
1 — Document Direction & Language
Set these correctly first; almost everything else depends on them.
Set dir and lang
Use the correct direction and language on the root element so the browser handles RTL natively. The HTML tag should declare the direction as right-to-left and the language as Arabic for Arabic pages.
Use logical CSS properties
Replace left and right with logical properties (inline-start and inline-end) for margins, padding, borders and text-align. The same stylesheet then works for both LTR and RTL with no duplication.
Avoid hard-coded directions
Do not pin elements with fixed left or right offsets. When the layout flips, those become the wrong side. Logical positioning keeps everything mirrored automatically.
2 — Fonts & Arabic Type
Arabic type has different needs from Latin type. This is where most builds look amateur.
Use a real Arabic webfont
Choose a font designed for Arabic (for example Cairo, Tajawal, IBM Plex Sans Arabic or Noto Sans Arabic). Latin fonts with a bolted-on Arabic fallback look wrong and break letter joining.
Larger line height
Arabic letterforms are taller and have more diacritics. Increase line height versus your English styles so text does not feel cramped, and test at real body sizes.
Do not bold or italicise blindly
Arabic has no true italics, and faux-bold can break letter shaping. Use weights the font actually ships, and emphasise with colour or size instead of italics.
3 — Mirroring & Bidirectional Text
What flips, what does not, and how to handle mixed Arabic-and-English content.
Mirror the layout
Navigation, sidebars, breadcrumbs, progress steps and carousels should flow right-to-left. Back and forward arrows must swap direction so they still mean back and forward.
Do NOT mirror everything
Logos, media playback controls, charts with a time axis, phone numbers and Latin brand names stay as they are. Mirroring these confuses users rather than helping them.
Handle mixed text (bidi)
Arabic sentences often contain English words, numbers, URLs or prices. Use Unicode bidirectional isolation so embedded Latin text and numbers do not scramble the surrounding Arabic.
4 — Forms, Numbers & Dates
Right-align fields and labels
Labels, placeholders and field text should align to the start (right in RTL). Icons inside inputs (search, calendar) move to the correct side automatically with logical properties.
Numbers and phone fields
Decide between Arabic-Indic and Western Arabic numerals for your audience (UAE and KSA commonly use Western numerals online). Keep phone numbers and prices left-to-right inside RTL text.
Validation in Arabic
Error and success messages must be properly translated and right-aligned, not machine-translated afterthoughts. Test the full submit-and-error flow in Arabic.
5 — Getting Found in Arabic Search
An Arabic site that is not optimised for Arabic search is invisible to half your market.
Correct hreflang
Each language version must declare the right hreflang (for example ar-AE and en-AE) and point at the matching page. Never point an Arabic hreflang at an English URL — a common, ranking-killing mistake.
Real Arabic keyword research
Arabic search terms are their own landscape, not translations of English keywords. Research how people actually search in Arabic, including dialect and transliteration differences across the GCC.
Arabic metadata and schema
Titles, meta descriptions, alt text and structured data should be written natively in Arabic on Arabic pages. Set the content language correctly so search engines index it as Arabic.
6 — The Final QA Pass
- Every page renders fully RTL — no element stuck on the wrong side.
- Arabic webfont loads on all pages, including dynamic and error states.
- Mixed Arabic-English lines (prices, phone numbers, URLs) read correctly.
- Directional icons (arrows, chevrons, back buttons) point the right way.
- Forms align right, validate in Arabic, and submit correctly.
- hreflang is correct and reciprocal between the Arabic and English versions.
- Arabic titles, descriptions and alt text are native, not auto-translated.
- Mobile RTL layout passes Core Web Vitals just like the English version.
Arabic & RTL Websites — Common Questions
Related reading: web design in Dubai · SEO services · SEO-friendly web development · GCC data protection laws.