Heiko Mamerow

Wer die Internationalisierung seines WordPress Themes ermöglichen möchte, wird sich auch über die Schreibrichtungen Gedanken machen. Insbesondere werden zwei CSS-Varianten benötigt. Einmal für LTR (links nach rechts) und einmal für RTL (rechts nach links). Zwei CSS-Varianten können den Aufwand für die Thementwicklung deutlich erhöhen. Im Beitrag möchte ich darauf eingehen, wie sich dieser Aufwand stark reduzieren lässt.

Die selbe Website einmal LTR und einmal RTL.

RTL Methoden bei WordPress

Grundsätzlich gibt es zwei Schreibrichtungen in horizontaler Richtung:

1. LTR (von links nach rechts)
   z.B. Deutsch, Englisch, Französisch, Spanisch
2. RTL (von rechts nach links)
   z.B. Arabisch, Hebräisch and Persisch

Über LTR müssen wir uns keine Gedanken machen. Das ist von hause aus gegeben. Für die Unterstützung von RTL werden im Codex zwei Möglichkeiten vorgestellt:

a) Ersetzungsmethode

Bei dieser Methode wird der Link im Dokument auf die originale Stylesheet Datei entfernt und durch ein RTL-Pendant (style-rtl.css) ersetzt.

b) Ergänzungsmethode

Bei der zweiten Methode bleibt die originale Stylesheet Datei (z.B. style.css) erhalten. Dafür wird zusätzlich die Datei rtl.css ergänzt. In rtl.css sind nur die für RTL relevanten Anpassungen enthalten. Weil rtl.css nach style.css geladen wird, überschreiben deren angepasste Regeln die original Regeln.

Wann eignet sich welche Methode?

Im Prinzip ist es egal, ob die originale Stylesheet Datei ersetzt oder ergänzt wird. Beides führt zum selben Ergebnis.

Ich präferiere die Ersetzungsmethode, weil sie die Webperformance nicht beeinflusst.

Die Ergänzungsmethode dagegen hat negativen Einfluss auf die Performance der Website, weil

1. Durch die zusätzliche Datei wird ein zusätzlicher Request ausgelöst.
2. Das Überschreiben der originalen Regeln erzeugt zusätzlichen Aufwand für den Browser.

RTLCSS

Egal, welche Methode gewählt wird, sie erfordern beide einen Aufwand in Umsetzung und Organisation für den Stylesheet. Glücklicherweise unterliegen die nötigen Anpassungsarbeiten relativ einfachen Regeln, die sich sehr gut automatisieren lassen. Und überglücklicherweise haben schon fleißige Leute Tools entwickelt, mit denn sich die entsprechenden Styles erstellen lassen.

Das von mir verwendete Tool ist RTLCSS. Es ist ein Konvertierungsscript für RTL. Es lässt sich sowohl in Verbindung mit einem Automatisierungstool oder auch als Online-Tool nutzen.

RTLCSS als Online Tool

Die RTLCSS Online ist sehr einfach zu bedienen. Damit lassen sich die schnellsten Ergebnisse erzielen. Der konvertierte Code kann für die Ersetzungsmethode ohne Nacharbeit genutzt werden. Wenn der Code für die Ergänzungsmethode verwendet werden soll, sollten nachträglich – von Hand – die unnötigen Styles rausgefiltert werden, um unnötige Überschreibungen zu vermeiden.

Screenshot RTLCSS Online: links der original Code; rechts die RTL-Version

RTLCSS Online sei allen empfohlen, die bereits ein fertiges Theme haben und es für RTL nachrüsten wollen.

RTLCSS mit npm

Die Verwendung von RTLCSS Online im Prozess der Thementwicklung ist allerdings umständlich. Weil nach jeder Änderung im Originalcode das Tool manuell bedient werden muss.

RTLCSS lässt sich aber prima in Verbindung mit einem Buildtool/Taskrunner verwenden. Ich zeige das hier am Beispiel von npm.

Ja, richtig gelesen. Denn npm lässt sich prima als Buildtool „missbrauchen“. Die gleichen Aufgaben lassen sich natürlich auch mit den anderen Buildtools erledigen…

Setup für die Ersetzungsmethode

Grundlage für das Setup sind: Node.js, npm (Npm ist in Node.js enthalten.) und PostCSS. Das sollte schon vorher installiert sein.

Schritt 1. Das Plugin RTLCSS installieren:

npm i -g rtlcss

Schritt 2. Im Rootverzeichnis des Projektes (Also dort, wo das Theme entwickelt wird.) npm initiieren. – z.B. im Terminal im Rootverzeichnis des Theme Projektes eingeben:

npm init

Schritt 3. In die frisch erzeugte Datei package.json den Task anlegen.

Nach dem Init wird die package.json erzeugt. Diese Datei im Editor öffnen und dann bei script das Folgende ergänzen:

{
  "name": "beispiel",
  "version": "1.0.0",
  "description": "Nur ein Beispiel",
  "main": "index.php",
  "author": "Heiko Mamerow",
  "license": "GPL-3.0",
  "scripts": {
    "rtl": "postcss -c ./npm-scripts/rtl.json",
  }
}

rtl => Der Name des Tasks
postcss => Es wird PostCSS ausgeführt.
-c => öffnet eine PostCSS Konfigurationsdatei für diesen Task
./npm-scripts/rtl.json => relativer Pfad zu Konfigurationsdatei

Schritt 4. Natürlich muss die angegebene Konfigurationsdatei noch erstellt werden. Also im gewünschten Pfad die Datei rtl.json anlegen. (Pfad und Dateiname kann natürlich angepasst werden.)

Schritt 5. rtl.json im Editor öffnen und eingeben:

{
  "use": [
   "rtlcss"
  ],
  "input": "./css-src/main-src.css",
  "output": "./schnell/assets/css/rtl.css",
  "map": "file"
}

use => Array; Dort nennen wir das PostCSS Plugin, was in diesem Task zur Anwendung kommen soll. Also: rtlcss
input => Pfad zum original Stylesheet
output => Pfad zum RTL Stylesheet (Wenn die Datei noch nicht vorhanden ist, wird sie später vom Task angelegt.)
map => Angabe, ob eine CSS-Map angelegt werden soll. (Ist nicht notwendig, aber macht sich besser, falls es mal später was zu debuggen gibt.)

Das war es schon, jetzt kann der Task ausgeführt werden – z.B. im Terminal im Rootverzeichnis des Theme Projektes eingeben:

npm run rtl

Im Editor sieht das ganze dann so aus:

RTLCSS mit PosctCSS im Editor

Wer mag, kann den obigen rtl Task noch mit einer watch Option automatisieren. So dass jedesmal, wenn die original CSS Datei editiert wird, gleich das RTL-Pendant aktualisiert wird.

Setup für die Ergänzungsmethode

Hier ist das Setup fast identisch wie bei der Ergänzungsmethode oben. Einziger Unterschied: für den Task nehmen wir ein anderes PostCSS Plugin: PostCSS-WPRTL

Dieses Plugin konvertiert im ersten Schritt die Regeln wie oben mit RTLCSS und filtert dann zusätzlich in einem zweiten Schritt alle unnötigen – weil ja im original Code vorhanden Styles – raus. Dieser zweite Schritt erspart uns unnötigen Code Ballast!.

Schritt 1. Das Plugin installieren – z.B. im Terminal im Rootverzeichnis des Theme Projektes eingeben:

npm i -g postcss-wprtl

Schritt 2 -4. sind wie oben.

Schritt 5. rtl.json im Editor öffnen und eingeben:

{
  "use": [
   "postcss-wprtl"
  ],
  "input": "./css-src/main-src.css",
  "output": "./schnell/assets/css/rtl.css",
  "map": "file"
}

Die Konfiguration ist ebenfalls wie oben – lediglich bei use ändert sich der Pluginname.

Der Task wird dann ebenfalls wie oben aufgerufen. Das Ergebnis ist allerdings ein wenig anderes als oben:

Etwas ist jetzt anders als oben. Finde den Unterschied! ;-)

Nachtrag

Die RTLisierung des CSS ist dank RTLCSS und den Buildtools nicht mehr so aufwendig und sollte zum guten Standard jedes Themes werden. Zum Testen von RTL Themes empfielt sich übrigens das Plugin: RTL Tester. Damit lässt sich das bestehende Theme für eingeloggte Admins prima testen.