Right-to-left (RTL) layout
Flipping the whole interface to run right to left for Arabic, Hebrew, and Farsi: text, reading order, and where everything sits on the page.
See it
What it is
Arabic, Hebrew, Farsi, and Urdu read right to left, and so do the interfaces around them. The switch is dir='rtl' on the html element: it flips text alignment, the base direction of every line, and the order of inline content. Reading order follows, so the first item in a row now sits on the right and the eye starts in the top right corner.
dir is the switch, not the whole job. Anything positioned with left, right, margin-left, float, or translateX stays exactly where it was and lands on the wrong side. That is why logical properties and deliberate mirroring exist. The cheapest path is to build layout with flex and grid, spell spacing with logical properties, and never name a physical side unless you mean it.
Gotcha: direction belongs to the content locale, not the browser. Set dir from the locale you are rendering, and set it per element when a page mixes languages. And do not flip everything on principle: numbers, phone numbers, code blocks, media playback controls, and clock faces keep their left-to-right order inside an RTL page.
Ask AI for it
Add full right-to-left support to this UI. Resolve direction from the supported-locale metadata or from the locale's script subtag rather than a hardcoded list of four language codes, then set dir on the html element from it. Replace every physical CSS side with its logical equivalent: margin-inline-start/end, padding-inline, inset-inline, border-inline, and text-align: start/end. Add explicit RTL overrides for the things logical properties cannot reach: transforms, SVG artwork, and direction-bearing controls like sliders and steppers. Keep numbers, code blocks, and media controls left to right. Use one stylesheet for both directions, no duplicated RTL sheet, and give me a page that renders the same components side by side in ltr and rtl.