Geo Pulse #42 — Shipping an Arabic (RTL) landing page without breaking it

Geo Pulse #42 — Shipping an Arabic (RTL) landing page without breaking it
Theme of the week: right-to-left is a checklist, not a translation job.

The order that saves you a second redesign:

→ Set dir="rtl" and lang="ar" on the html tag first — half your layout fixes itself.
→ Mirror with CSS logical properties (margin-inline-start, not margin-left) so one stylesheet serves both directions.
→ Keep numerals, phone numbers, and prices left-to-right inside RTL text using ‎ marks — otherwise '+971' renders backwards.
→ Do NOT flip directional icons that carry meaning (a play button); DO flip arrows and progress bars.
→ Test fonts: many Latin webfonts have no Arabic glyphs. Use Noto Sans Arabic or IBM Plex Arabic as a fallback.
→ Have a native speaker check line-breaks on CTAs — Arabic strings run 20–30% longer.

Reference: MDN's 'Handling different text directions' guide and the W3C i18n RTL article. Both are the canonical free sources.