BulletProof RTL
RTL in a web platform (3/6)
This post was originally published in the dev platform and is the 3rd part of a 6 part series, on how to build an RTL-compatible web platform, take a look at the previous one here.
Making RTL bulletproof
As I stated in the last post, using CSS Logical Properties in all our stylings, brings some problems to the table, and these are the 2 major ones that I'm going to cover:
- Older browsers support
- Human error-prone
Fortunately, there is one solution that solves both problems at once, and makes your system bulletproof in this context! And that is in simple terms, reversing the CSS before it is applied.
Older Browsers Support
According to caniuse.com, left and right equivalents in CSS logical properties have about 86% support across all browsers. Which is already a lot and might be good enough for some platforms.
But if you have the "boring work", of making your RTL compatible platform is supported by the older browsers ( we are all looking at you IE...), then 86% is clearly not enough.
Human error-prone
As humans, we sometimes make small mistakes, simply by the force of habit, we enter in that "auto-pilot mode", in which our subconsciousness takes over, and we end up making something we didn't mean anymore.
This behavior will probably happen a lot if you suddenly enforce the use of CSS Logical Properties in the codebase. As the vast majority of web developers are used to write *-left & *-right instead of *-start & *-end. Also, when copying code snippets from other places or even reading through the design's CSS, there is a high chance for these types of situations to occur.
Even if you have a Code Review system in the project you are working with, these little left and right CSS properties will eventually get through and mess up some visuals on the website in the RTL version.
The Solution
In theory, the solution for both problems referenced above is quite simple. We only need to reverse *left to *right and vice-versa when changing our website to an RTL language.
And that would actually be easy, if all of us were using the exact same solution for styling, like plain old CSS stylesheets or even CSS Modules. But no, each platform is unique and each one uses a different setup for styling. So, I'm just going to cover how we could do this with Styled Components, which is probably the most used CSS-in-JS tool in all the modern web platforms these days.
Styled Components with RTL
Due to the popularity of this CSS-in-JS lib, there were created a ton of Open Source libs and tools around Styled Components. Being stylis-plugin-rtl is one of them. And this one, in particular, can be used to resolve our RTL issues.
Stylis-plugin-rtl is a small lib that when passed in the StyleSheetManager wrapper's props, will reverse all the paddings/margins/positioning values that are defined inside a Styled Component.
The following code snippet was built inside a Next.js project.
As you can see in the code sample above, we are attaching the plugin whenever the direction is set to rtl and not attaching anything when the direction in ltr. This way, when in Right-to-Left the property left becomes right, padding-right becomes padding-left and so on. This will only happen if these properties are defined inside a Styled Component.
This doesn’t only help in positioning, but it also helps a lot on preventing UI related bugs, whenever a sneaky padding-left passes through the code review and enters production.
Conclusion
In case you have to support all the older browsers, look at the tools around the styling solution you are using, and hopefully, you will find something that is able to reverse your CSS properties depending on the document’s direction.
Next Chapter
In the next chapter, we will be taking a look at components that need to be reversed in order to have the same meaning in RTL and LTR (icons), and how can we achieve that.
Make sure to follow me on Twitter, to stay tuned with the latest updates on these series!
If you enjoy working on large-scale projects with global impact and if you like a real challenge, feel free to reach out to us at xgeeks! We are growing our team and you might be the next one to join this group of talented people 😉
Check out our social media channels if you want to get a sneak peek of life at xgeeks! See you soon!
