This post is the 5th part of a 6 part series, on how to build a 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 an 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

• Carousel
• Calendar
• Price 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 of 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 is pretty damn low (good opportunity to do some OS contributions 👀). But that doesn't make it any less worth to use 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 are 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 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 as 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 behaviours 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 careful in this context.

Next Chapter

On the next and final chapter we will take a closer look on 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!