Right to left localization with pure CSS selectors

So this week I've spent most of my times working on right-to-left localization on Webmaker.org and thought I should write some blog post to update and share what I have learned so far with right to left.

This is the Left to right version of the site

Withoht the magic of the CSS this is what happening when we are doing right to left

So now we use some LESS library call rtltr-for-less which will basically parse our LESS file and try to convert any properies and values that is a direction to the opposite for instance if:

.ClassName {
    text-align: left;
    margin-right: 20px;
    padding: 30px 20px 0 20p
}

It should now be

.ClassName {
    text-align: right;
    margin-left: 20px;
    padding: 30px 20px 0 20p
}

Then our result after this trick we are getting something like this

Now as you can see things getting much better and in the right position but!!! there are things that you will need to polish and especially images like the sign in button that we need to have some more code to apply to make it right.

With images what I have learn we can use CSS Transform to flip the image. In right to left almost everything is just the mirror of left to right, so we can do something like:

    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);

With that it will flip the image to the other side.

Also, with the banner (Green and Yellow one) as you can see they are in the wrong direction because how it is rotate in ltr was

    transform: rotate(-45deg);

So I have to change it the opposite by making it positive

    transform: rotate(45deg);

But the question was how can I make this dynamic? Because we want one style for LTR and the other for RTL?

I've learned that I can use pseudo CSS selector to apply a specific style for each one and this is how I did it

In the HTML element I have to specify the direction, so what it was originally is:

<div class="banner">  
      Some text here
</div>  

So I added dir="{{localeInfo.direction}}" in to the element (This is a variable from our templating engine, so it will detect the language and return either ltr or rtl depend on the request.

This is what we have now

<div dir="{{localeInfo.direction}}" class="banner">  
      Some text here
</div>  

Or

<div dir="rtl" class="banner">  
      Some text here
</div>  

And with CSS all we need to do is using this CSS selector with our dir

So now we have

  .banner[dir="rtl"] {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

So after the trick!

As you can see we have a final product that is nice and clean for RTL without effecting the LTR one :)