Almost every project I ship in Iraq needs Arabic and English side by side. The mistake I made early on was treating right-to-left as a finishing task: build the whole thing in English, then flip a switch and spend a week fixing what broke.
Now I start bilingual. It costs almost nothing up front and saves that whole week.
Direction is a document concern, not a component one
I set the direction once, on the html element, and let everything inherit it. Components read logical properties instead of physical ones, so the same code lays out correctly in both directions.
- Use margin-inline and padding-inline instead of left and right
- Use inset-inline-start instead of left for absolutely positioned elements
- Let flexbox and grid do the mirroring; avoid hard-coded float directions
- Keep directional icons in a component that flips with the document
The parts that still need a human
Logical properties handle layout, but language still needs judgment. Numbers, dates, and embedded English inside an Arabic sentence all have their own rules, and a naive flip gets them wrong.
My rule of thumb: automate the box model, review the typography by eye. If I can read a paragraph in both languages without wincing, it is done.