Handling the frontend on a LTR/RTL website (and how to cheat)

Thanks for joining us, we're going to cut the chit chat and get straight into it. Are you looking to convert a website to RTL and think it's going to be a massive pain? Pro-tip: it's not.

We've got the prompt for you, and we'll drip feed you the rest of the tips until you get in touch and pay for our consulting services...

A little intro

We've always built internationalisation for our clients, but never done so for our own website. Now here's the kicker, we never actually built Roboto Studio to work with RTL, so there's a lot of frontend development debt we need to get through... Knowing we're lucky to get a spare day off from client projects, we need to get our collective asses in gear, with as much AI heavy-lifting as possible.

So guess who built a beautiful little prompt to swap our UI from LTR specific to direction agnostic in one go... This guy.

LTR/RTL prompt for Tailwindcss

I'm glad you're here and using Tailwindcss. This star is for you 💫

---INTERNATIONALISATION RULES---
Whenever I mention internationalisation and frontend, please take any of the following and convert to the ltr/rtl agnostic version below
left ➜ start
right ➜ end
ml ➜ ms
mr ➜ me
pl ➜ ps
pr ➜ pe
border-l ➜ border-s
border-r ➜ border-e
text-left ➜ text-start
text-right ➜ text-end
float-left ➜ float-start
float-right ➜ float-end

LTR/RTL prompt for Vanilla CSS

Don't worry, for all those weirdos and purists out there, I've included a vanilla version, that's definitely not the above prompt ran through ChatGPT....

---INTERNATIONALISATION RULES---
Whenever I mention internationalisation and frontend, please take any of the following and convert to the ltr/rtl agnostic version below
margin-left ➜ margin-inline-start
margin-right ➜ margin-inline-end
padding-left ➜ padding-inline-start
padding-right ➜ padding-inline-end
border-left ➜ border-inline-start
border-right ➜ border-inline-end
text-align: left; ➜ text-align: start;
text-align: right; ➜ text-align: end;
float: left; ➜ float: inline-start;
float: right; ➜ float: inline-end;

For all those CSS purists out there 💔

Go use Cursor

We would advise putting the prompt into Cursor, because we swear by the tool and it's actually been a productivity booster to the magnitude of probably 2x the speed at which we can knock these things out. However, this will work almost as well if you feed your code into something like ChatGPT or Anthropic.

But seriously, use Cursor and tell them "Jono sent you"

Why it works, and the background to direction agnostic

So you might have never seen the above values before, but they're basically just LTR/RTL agnostic ways of styling something with CSS and means that you don't have to use annoying rtl and ltr modifiers.

If you want to learn more about this approach feel free to check it out here, it's a comprehensive overview and covers all the above far better than anything I could plagiarise.

Final thoughts

We'd love to help you build your RTL/LTR websites and internationalisation, it's really not as hard as it once was, but it's mostly thanks to AI, RSC and a whole bunch of trial and error we've done on our side. That being said, it's always easier to build it knowing all the pitfalls first.