Building Accessible, Multilingual Websites

Multilingual support sounds like a pure translation task until you add Arabic and half the page starts spinning in the wrong direction. Here are a few things that taught us hard lessons. CSS logical properties aren't enough on their own. Swapping `margin-left` for `margin-inline-start` fixes a lot automatically, but not everything. Layouts built on pixel-precise `translateX` for animation break under RTL because the direction of motion itself needs to flip — no logical property does that for you. Flexbox and grid ordering can sabotage animations that assume a fixed order. Our logo marquee, for instance, disappeared entirely off-screen under RTL, because shrink-to-fit block boxes right-align by default in RTL, combined with an animation that assumed left-to-right motion. The fix was forcing the marquee container to `direction: ltr` explicitly and letting the parent container handle the visual mirroring. Arabic is a cursive script — letters connect differently depending on their neighbors. A technique we'd used for staggered text effects in English (splitting text into individual letter spans) completely broke those connections and produced garbled, unreadable text. The fix was detecting Arabic text with a regex and animating at the word level instead of the letter level.