Most of the time we forget to write the right-to-left (RTL or dextrosinistral) CSS. And this impact on your users which are more familiar with there language.
In this article, we are going to learn how to auto-generate the RTL CSS from our LTR or regular CSS file.
We are using the Grunt package
grunt-rtlcss to generate it.
Let’s assume we have a project
first-project and it contains 2 CSS files. And its file structure is as below:
Here, We have
style.css and the
common.css files. Lets auto generates the
Install Package Install Package
First, we need to install the grunt package
grunt-rtlcss. Lets follow below steps:
- Open a terminal and navigate to
- Type below command:
npm i grunt-rtlcss
To install the https://www.npmjs.com/package/grunt-rtlcss
Now execute command
grunt rtl it’ll generate the RTL files from our source CSS files.
See below example:
λ grunt rtl Running "rtlcss:dist" (rtlcss) task File assets/css/common-rtl.css created. File assets/css/style-rtl.css created. Done.
In my example I have 2 files in my
assets/css/ directory. These are
style.css for that RTL generates 2 RTL files there are