Right-to-Left in a web platform (1/6)

Introducing Right-to-Left

If you are trying to build an international web platform and you want it to be accessible anywhere in the world, then, RTL (right-to-left) compatibility is not a just a "luxury", it is a real necessity.

This series are obviously being written by someone who is used to see and read things from a LTR (Left-to-Right) perspective his whole life, or else, this wouldn't even make sense, because RTL would just be the standard.

First Step

So let's say, you wanna introduce RTL in your web platform, and you have no idea where to start. And so, you start to look around the internet or even ask your colleagues, and you come up to read or hear something like this:

It's just needed to change the direction in the html tag and it will be ready…

Well kinda, but not really.

Yes, it will solve more than 50% of your problems and it is a really good starting point, and in my opinion, the right start, but obviously, it isn't enough if you really wanna build something accessible and deliver a good UX to your users.

Problems solved by adding dir="rtl" to the html tag:

1. Every block element and table columns will now start on the right and flow from the right to left;
2. The text will also flow from right to left;

Why changing document's direction is not enough

After changing the document's direction, this section already looks quite different in both versions, but if you take a closer look, you will see that there are some differences in the visual effect of certain elements.

What I mean is, you should be able to know, that the text is related with the image, without really thinking about it. But in the RTL version, that was not achieved.

And why was that not achieved? - you may be wondering.

Well, that's just because that image was positioned using some sort of physical CSS properties. Which are pretty much all the css properties that include the keyword left or right.

margin-left, margin-right, padding-left, padding-right, left, right...

And these properties, don't really care about the document's direction, as right still means "right", doesn't matter from which to which place you are reading.

Conclusion

1- Adding dir="rtl" in the html tag is the correct first step;
2- There will be still a lot of problems to solve after that;
3- Physical properties might be evil.

Next Chapter

On the next chapter, we will be talking more in depth about physical properties and how we can leverage logical properties to make a RTL compatible web platform.