Building right-to-left interfaces from day one
Mirroring a finished English product is the expensive way. Here is the cheap way, and the three things that never flip.
01
Logical properties, always
Use inline-start and inline-end instead of left and right, from the first stylesheet. The browser mirrors the layout for free when the document direction changes. Retrofitting this later means touching every rule.
02
What flips and what does not
Navigation, grids, reading order and chevrons flip. Logos, product screenshots, code and phone numbers do not. Decide this list once and write it down; most RTL bugs are someone being inconsistent about it.
.card { padding-inline-start: 16px; border-inline-end: 1px solid var(--line); }
[dir="rtl"] .logo { /* nothing. The logo does not flip. */ }03
Write, do not translate
Arabic copy written for Arabic readers is shorter, clearer and sounds like a person. Translated English sounds like a manual. Budget for a writer, not a service.
Sample article. Written to show the register, not to claim the result.