In this tutorial you will learn about a plug-in you can use to help you provide left-to-right support to a Javascript based website. Providing mutti-language support in a site used to be a challenge. Different languages can have different characters. A sentence in English might required double the amount of characters when it is translated into German. On top of that if you want to cater for languages like Hebrew or Arabic, you will need to provide right-to-left support.

I remember having to do this several years ago working on a monolithic C# e-commerce platform. THe business gave the team a hard deadline to have an Arabic version of the site working within 3 months. The CSS was written a few years before and providing multi-language support was never part of the original scope. With such a tight-deadline the team did the only things possible... hack the code until it was deemed acceptable.

Luckily things are much better now that they we're then, especially if you are using web-pack and PostCSS. The Google definition of PostCSS. is a JavaScript package that you can be used within a project to automate routine CSS operations. 'CSS operations' is pretty vague, if you want to learn more I have previously discussed some of its useful features here. You can probably guess where this is heading. There is a right-to-left PostCSS plug-in that will automatically switch your website to right-to-left. This will all be done using an amazing plug-ins called, postcss-rtl.

Using postcss-rtl

First, you can install postcss-rtl with yarn/npm, using:

Depending on your set-up, if you have a postcss.config.js file then you need to enable it, like so:

With the plug-in installed and enable, when the CSS is built, a right-to-left option will also be generated. When you start a right-to-left project all you will really want to do, is invert each property name or value from left to right and see how the site looks. This is where Just because you use 'postcss-rtl' really shines. Within a very short period of time, you can convert your site with minimal work.

How To Writ Right-to-Left CSS?

First, lets quickly discuss how to write right-to-left CSS. When you want to write CSS to target different text directions, you use the 'dir' attribute. The 'dir' attribute sets the base direction of how text is displayed. To enabled right-to-left staying on a page, within your pages mark-up you would set it like so:

There are several approaches on how you would write you could write your CSS, some approaches may include:

Postcss-rtl

When your application compiles, it will call web-pack. At some point, web-pack will call post-css to process your SCSS into CSS and perform any additional tasks. As part of this process, if configured correctly, post-css will also run postcss-rtl. When postcss-trl has loaded it when compiling your SCSS it will also auto-generate additional CSS targeting that targets the 'dir' attribute. For example, take this simple selector:

After 'postcss-trl' runs, if you look the end CSS file you will find a new selector, including 'rtl' and 'ltr':

Armed with these new styles, if you set your pages HTML dir to RTL and reload the page, you should now see that your site's text has flipped. A word of caution, 'postcss-rtl' is a plug-in which means that it may not look perfect for all languages without any additional custom styling. It will, however, get you a lot further down the path without having to do much. From my experience, we probably saved 4 weeks of effort compared to having manually go through and write all the CSS manually. Enjoy!