Icons have meaning
RTL in a web platform (4/6)
This post was originally published in the dev platform and is the 4th part of a 6 part series, on how to build an RTL-compatible web platform, take a look at the previous one here.
Icons Meaning
Since many years ago, the web has adopted icons to either, give the user a hint on certain actions or to replace text because it was too large. Sometimes, we even have text with the icons right next to it, because reading an icon’s logical meaning is so much faster than reading a word/phrase.
Here are a few examples of icons and their logical meanings, that you should be able to recognize:
🗑️ =>The trash means a removal/destructive action;
💾 =>The floppy disk means a save action;
➕ =>The plus means an adding action;
…
Icons in RTL context
But why should icons be any different in RTL or LTR? Well, for the examples I purposefully showed above, there is absolutely no difference, but let’s look at these:
➡️ — The right arrow means going ______
⬅️ — The left arrow means going ______
Now, you can try to fill in the blank space, but unless your guess contains a if in the middle, you are only thinking from one perspective.
What I mean, is that ➡️ does mean going forward if you are looking at it from an LTR perspective, else, it does exactly the opposite, and it means, going back. The same thing is applied to ⬅️, having different meanings depending on the directional mindset you look at it.
Tackling icons in a web platform
In most RTL compatible platforms, there are 3 types of icons. So the first step in tackling icons correctness should be classifying them into one of those 3 types.
The question you should be asking to classify them is:
Should this icon flip in RTL?
With that in mind, you can create these 3 sets of icons:
1- Bidirectional icons, are the ones that look the same in RTL and LTR.
2- Unidirectional icons, are the ones that should rotate depending on the document’s direction because they usually have different meanings depending on their direction.
3- Brand Icons, these icons represent brands or entities whose logo should remain the same, regardless of direction or language.
Code Implementation
After making this icon classification, you are already pretty far on the process. The next step is creating this logic in code, and my advice here is to create a single Icon the component that acts as the source of truth for all your platform's icons.
That way, you have a wrapper that will control all your components and you don’t have to worry about flipping/not flipping every single icon.
Not looking too much at the implementation details, by using a wrapper as the one above, you can easily pass in a noFlip prop to the icons that you really don't want to flip (brand ones), and for all the other icons, it is already covered!
Conclusion
1- Take a closer look into your icons and classify them beforehand, so that you can easily reverse the ones you need when implementing the code.
2- Create an Icon component that serves as a wrapper and the source of truth of all your icons. This is where the RTL vs LTR logic should live.
Next Chapter
In the next chapter, we will take a closer look at external components, and how we can also make them RTL compatible.
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!
