DEV Community

Cover image for Mastering RTL with One Line of CSS (No Libraries Needed!) 🚀
ALI ALHARBI
ALI ALHARBI

Posted on

1

Mastering RTL with One Line of CSS (No Libraries Needed!) 🚀

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 }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more