External Components — Carousel
RTL in a web platform (5/6)
This post was originally published in the dev platform and is the 5th part of a 6 part series, on how to build an RTL-compatible web platform, take a look at the previous one here.
External Components
Most of us working in web development (especially while employees) have extra pressure to ship fast. Meaning we should grasp ourselves to whatever we can, to make our workflow more efficient, thus, delivering a fully-featured product way faster.
Surely you can increase the speed in which you are able to deliver a product in many different ways. But the one that we are gonna enter in more detail here, is the usage of already existing solutions, more specifically, external components.
I’m referring to external components as all the components that you might import from someone else’s lib.
Some common ones are
CarouselCalendarPrice Slider- …
By putting your “engineer ego” aside and actually using these external components developed by the community, you should be able to gain a lot of speed and to ship way faster.
External Components in RTL
The big problem with using these components, if that sometimes they don’t fulfill those weird use cases you might have in your project. And yeah, RTL is most definitely one of those “weird use cases”.
From my experience, the odds of any external components being RTL compatible are pretty damn low (good opportunity to do some OS contributions 👀). But that doesn’t make it any less worth using most of these components, after all, for we engineers/developers this is obviously not a valid excuse for not showing the interfaces as the users expect them.
Carousel
One of the most used components in most websites these days is Carousels. And unless you have a big team or you are in no rush to ship, you shouldn’t be looking to implement one yourself, as there are plenty of Open Source alternatives out there.
The open-source package I’ve personally been using most for carousels is react-responsive-carousel. There might be better alternatives out there, but this one has served me well with a nice API and good documentation as well.
Adding RTL support
Although the package is really complete, it doesn’t satisfy in terms of RTL compatibility.
Taking a look at this image above, which is in LTR mode, there is plenty that needs to be changed, because the carousel has a lot of “hints” on where to move and on what’s left to see.
So, what do we need to change? — you might be wondering.
Well, the easiest way to know that, is by putting a carousel that is RTL side by side with one that is in LTR, and try to figure out if all of their actions and hints have the same meaning. If so, you have certainly done a good job!
For the specific Carousel above, here are 3 main points that you would have to look out for:
1- Reversing the images array for one of the versions (probably the RTL one). So that we show the same slides in the first place for both versions;
2- Disabling the NEXT/PREVIOUS arrows for the first slide, depending on the document’s direction;
3- Adding specific behaviors for onClick handler to the NEXT/PREVIOUS arrows depending on the document’s direction.
And… Voilà, that would be the end result ☝️
Conclusion
1- If you have external components in your web platform, take a closer look and check their RTL compatibility;
2- Carousels are extremely heavy on direction hints/actions and should be handled with extra care in this context.
Next Chapter
In the next and final chapter, we will take a closer look at how numbers bring some challenges in the RTL context, and in ways, we can handle them.
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!
