Ever thought RTL layouts were a hassle? Think again! You don’t need complex libraries or a pile of code. Here’s the simple solution to handle RTL like a pro.
The Magic One-Liner 🪄
Here’s all you need:
[lang="ar"] { direction: rtl }
Then, with lang="ar" on <main>, the content inside flows from right to left, while the rest of the page stays untouched.
<main lang="ar">
//.... RTL Content
</main>
Yup, that’s it! By targeting elements with [lang="ar"], you tell your CSS exactly where to flip things around, making sure only Arabic (or any RTL language) sections flow from right to left. Clean, focused, and without affecting the whole page!
Why Not Just Use direction: rtl on body? 🤔
Good question! Setting direction: rtl on the html or body tags flips everything, which can mess with layouts for other languages. If you’re running a bilingual site, this one-liner keeps things neat and language-specific—no unexpected surprises!
What About Browser Translation? 🌍
Browsers translate and (usually) respect [lang="ar"] for layout direction. This keeps things tidy even if users switch languages. But let’s be real: browser translations aren’t perfect, so test it out and see the magic for yourself!
Got a Better Way? Prove Me Wrong! 🎉
Alright, maybe everyone already knows this 😅. If not, try it out. And if you’ve got a better solution, let me know!
Happy coding ✨
Top comments (0)