Wenn eine Website in einer von rechts nach links zu lesenden Sprache dargestellt wird, müssen einige CSS-Regeln geändert werden, wenn das CSS eigentlich für Links-nach-Rechts-Sprachen geschrieben wurde. So sind zum Beispiel Floats sowie linke und rechte Abstände anzupassen. Diese Anpassungen manuell vorzunehmen würde je nach Komplexität des Stylesheets einige Zeit dauern – mit Hilfe von Gulp geht es deutlich einfacher und schneller.
Bisher habe ich zwar schon ein paar WordPress-Themes erstellt, mich aber noch nicht wirklich mit Rechts-zu-Links-Text auseinandergesetzt. Im jetzt fast fertigen Theme habe ich das geändert und mich umgeschaut, wie die CSS-Regeln dafür am einfachsten angepasst werden können. Da ich Gulp nutze, bin ich schnell auf das Gulp-Plugin gulp-css-flipper gestoßen, das genau diese Aufgabe übernimmt. Der entsprechende Teil der gulpfile.js sieht bei mir so aus:
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-Sprache: JavaScript (javascript)Der Task nimmt die CSS-Dateien aus dem assets/css-Verzeichnis (ausgenommen die auf -rtl.css endenden Dateien), führt das Plugin aus, hängt den Dateien ein -rtl-Suffix an und speichert sie wieder in dem Ordner.
Intelligent ist der Flipper natürlich nicht. Er kann nicht erkennen, ob eine Regel aus irgendwelchen Gründen vielleicht nicht geändert werden muss, weshalb ihr im Anschluss alles noch mal testen solltet. Bestimmte Regeln oder ganze Blöcke könnt ihr über einen /*@noflip*/-Kommentar vor der Regel oder vor dem Selektor (für den gesamtem Regel-Block) vom Flipper ausschließen. Die Doku zu dem Plugin gibt es auf GitHub.