Translate CSS from LTR to RTL

#Introduction Introduction

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.

Arabic, Hebrew, Persian, and Urdu Sindhi are the most widespread RTL writing systems in modern times. Source wikipedia.org

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:

first-project/assets/style.css
first-project/assets/common.css

Here, We have style.css and the common.css files. Lets auto generates the style-rtl.css and common-rtl.css files.

Top ↑

#Install Package Install Package

First, we need to install the grunt package grunt-rtlcss. Lets follow below steps:

• Open a terminal and navigate to first-project
• Type below command:

npm i grunt-rtlcss

To install the https://www.npmjs.com/package/grunt-rtlcss

Gruntfile.js

	module.exports = function( grunt ) {
	'use strict';
	// Project configuration
	grunt.initConfig( {
	rtlcss: {
	options: {
	// rtlcss options
	config: {
	preserveComments: true,
	greedy: true
	},
	// generate source maps
	map: false
	},
	dist: {
	files: [{
	expand: true,
	cwd: "assets/css/",
	src: [
	'*.css',
	'!*-rtl.css',
	],
	dest: "assets/css/",
	ext: '-rtl.css'
	}]
	}
	}
	} );
	// Load task.
	grunt.loadNpmTasks( 'grunt-rtlcss' );
	// Register task.
	grunt.registerTask('rtl', ['rtlcss']);
	};

view raw Gruntfile.js hosted with ❤ by GitHub

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 common.css & style.css for that RTL generates 2 RTL files there are common-rtl.css and style-rtl.css.