Development

RTL guide: building Arabic websites that don't look "translated"

Mohammed Katanani May 2026 8 min read

Arabic support isn't just dir="rtl" and done. These are the details separating professional sites from flipped templates:

Use CSS logical properties

/* instead of */
margin-left: 16px;
/* use — flips automatically with direction */
margin-inline-start: 16px;

Pick an Arabic font designed for screens

IBM Plex Sans Arabic, Tajawal and Cairo are excellent. Avoid fonts designed for print.

Numbers and dates

Decide upfront: Arabic numerals (١٢٣) or Western (123)? Consistency matters more than the choice itself.

In my bilingual projects, I build RTL at the architecture level with logical properties — not with patches afterwards.
Is your website suffering from these issues?I'll audit it for free and send you a clear report.
Request a free audit

Related articles

Replies within minutes