We build a lot of English/Arabic sites for businesses in the UAE, and the same right-to-left (RTL) issues come up on almost every project. Here's the checklist we run before launch.

1. Set direction and language on the root

<html lang = "ar" dir = "rtl" >

Enter fullscreen mode

Exit fullscreen mode

Set both per page, not with JavaScript after load. Screen readers, search engines and the browser's text shaping all rely on lang , and dir controls layout from the first paint.

2. Use logical CSS properties

Replace physical properties with logical ones so one stylesheet works in both directions:

/* instead of margin-left / padding-right / left */ .card { margin-inline-start : 1rem ; padding-inline-end : 1.5rem ; } .badge { inset-inline-start : 0 ; } .text { text-align : start ; }

Enter fullscreen mode

Exit fullscreen mode

Flexbox and grid already follow dir , so most layouts flip for free once the physical properties are gone.

3.…