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.
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
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, let's 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:
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 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:
postcss-rtl 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!