May 12, 2026 · 3 min read

Arabic-first

Most multilingual sites treat Arabic as an afterthought. The Latin design ships, then someone tries to flip a few classes with rtl: modifiers and calls it done.

That’s how you get sites where the navigation is in the right place but the icons still point the wrong way, and the spacing feels two pixels off everywhere.

What I do instead

Set dir at the <html> level. Browsers know how to handle RTL. Help them.
Use logical CSS properties. padding-inline-start instead of padding-left. Tailwind v4 has decent support; it’s worth using.
Pick fonts that actually have Arabic glyphs. Geist doesn’t. Use Tajawal or Noto Sans Arabic as a fallback in [dir="rtl"].
Mirror only what should mirror. Icons that imply direction (arrows, chevrons) need to flip. Logos, photos, code blocks — leave them.

What I don’t do

I don’t translate code. I don’t translate numbers if they’re technical ($300 stays $300, not ٣٠٠). I don’t treat Arabic as a translation problem — it’s a design problem with a translation step.