Adapt CSS for right-to-left languages with Gulp

If a website is displayed in a language which goes from right to left, we need to modify a few CSS rules if the CSS was written for left-to-right languages — for example, we would need to adjust left and right spaces and flip floats. We could make these Adjustments manually, but that can be time-consuming. With the help of Gulp, it is easier and faster.

Until now, I released a few WordPress themes but did not think about right-to-left-text. I changed this for the almost-ready Theme and searched for an easy solution to modify the CSS rules. I am using Gulp, so I quickly found the plugin gulp-css-flipper, which does the task.  The important part of my gulpfile.js looks like that:

const gulp = require('gulp');
const rename = require('gulp-rename');
const flipper = require('gulp-css-flipper');

gulp.task('css-rtl', function () {
	return gulp.src(['assets/css/*.css', '!assets/css/*-rtl.css'])
		.pipe(flipper())
		.pipe(rename(
			{suffix: "-rtl"}
		))
		.pipe(gulp.dest('assets/css/'));
});
Code language: JavaScript (javascript)

The task fetches the CSS files from assets/css (except the files ending on -rtl.css), runs the plugin, adds a -rtl suffix and saves the new files into the same directory.

Of course, the flipper is not intelligent. It cannot check if a rule should not be flipped because of any circumstances, so you better check the result. You can exclude specific rules or blocks of rules from the flipper with adding a /*@noflip*/ comment before the rule or the selector (for a whole rule block). You can find the plugin documentation on GitHub.