Rtl-Schrift-Unterstützung (für Arabisch und Hebräisch) in WordPress

Mit der Veröffentlichung unseres Ari WordPress-Themes bei wordpress.org ist uns noch einmal so richtig bewusst geworden, wie viele unterschiedliche Schriften es weltweit gibt und wie wichtig es ist, dass ein WordPRess-Theme diese auch unterstützten kann. Bisher habe ich die rtl.css Datei in Themes leider immer etwas vernachlässigt. Diese zusätzliche CSS-Datei sorgt dafür, dass Schriften, die von rechts nach links geschrieben werden (right to left-Fonts), wie Arabisch und Hebräisch unterstützt werden.

Doch eigentlich ist es gar nicht so kompliziert, die rtl CSS-Datei vorzubereiten und so das eigene Theme für möglichst viele Sprachen zu optimieren.

Und so funktioniert’s

Am einfachsten ist es, du kopierst dein Haupt-Stylesheet und speicherst es noch einmal mit dem Namen rtl.css. Dann fügst du in der CSS-Datei bei „body“ folgende Eigenschaften hinzu:

body {
	direction: rtl;
	unicode-bidi: embed;
}
Alle right- und left-Attribute austauschen

Als nächstes solltest du deine rtl.css Datei komplett von oben nach unten durcharbeiten und alle CSS-Eigenschaften mit den Werten right oder left vertauschen. Dies betrifft u.a. die CSS-Eigenschaften float, text-align und clear.

#main {
	float: left;
}
wird zu:
#main {
	float: right;
}
Hintergrund-Bilder spiegeln

Außerdem solltest du auch beachten, dass alle im Theme verwendete Background-Images (z.B. für ein Hintergrundbild mit Muster) gespiegelt werden müssen. Am besten du erstellst eine von-rechts-nach-links-Version des Original-Bildes mit dem Namenszusatz „bildname-rtl.png“.

Die Position deines Background-Images muss ebenfalls noch geändert werden, falls du diese definiert hast. Wenn der Original-Wert der x-Achse 0 ist, solltest du diesen auf 100% ändern. Der Wert der y-Achse bleibt der gleiche.

#header {
	background: url(images/header.png) 0 0 no-repeat;
}
wird in der rtl.css Datei zu:
#header {
	background: url(images/header-rtl.png) 100% 0 no-repeat;
}
Positionierung

Die CSS-Eigenschaften right:..; und left:..; musst du ebenfalls anpassen. Ist die originale Position left: 40px; musst du sie in der rtl.css mit left: auto; und right: 40px; definieren.

Margin, Padding und Borders anpassen

Auch alle Margins, Paddings und Borders müssen spiegelverkehrt angelegt werden. Daher musst du die Werte von margin und padding vertauschen, border-left wird in der rtl.css zu border-left: none; und der Wert wird in border-right übertragen.

#content {
margin: 10px 30px 20px 20px;
padding: 30px 10px 30px 15px;
border-left: 1px solid #ccc;
}
wird also in der rtl.css Datei zu:
#content {
margin: 10px 20px 20px 30px;
padding: 30px 15px 30px 10px;
border-left: none;
border-right: 1px solid #ccc;
}
Schriften

Sans-serif-Schriften ohne die Nutzung von italic sind am besten für die rtl-Schriften geeignet. Daher solltest du zusätzliche alle italic-Werte auf normal setzen und alle Serifen-Schriften in Sans-Serifen wechseln.

.post .entry-meta p {
	font: italic .8em/1.5 'Droid Serif',  Times, serif;
}
wird also zu:
.post .entry-meta p {
	font: normal .8em/1.5 'Droid Sans', arial, sans-serif;
}

Alle übrigen CSS-Eigenschaften, die bis jetzt nicht verändert wurden, solltest du im letzten Schritt noch aus deiner rtl.css Datei löschen.

CSS Janus nutzen

Möchtest du deine rtl.css Datei nicht komplett von Hand anpassen, kannst du auch das Online-Tool „CSS Janus“ nutzen. Mit Hilfe des Tools kannst du deinen originalen CSS-Code eingeben und automatisch eine rtl-Version des Codes erstellen. Du solltest aber alle Eingaben auf jeden Fall noch einmal überprüfen.

rtl-Schriftunterstuetzung in WordPress
Das CSS Janus-Tool zum konvertieren von CSS für rtl-Unterstützung.

Einen Artikel und Video-Intro über das CSS Janus-Tool findest du auch auf dem Google-Opensource-Blog.

Wir werden in der nächsten Version von Ari auf jeden Fall auch die rtl.css Datei mit anbieten, um so auch die rtl-Schriften zu unterstützen. Kennst du noch weitere hilfreiche Tipps oder Tools für die rtl-Schrift-Unterstützung in WordPress? Über dein Feedback und weitere Tipps freue ich mich sehr!

Link-Tipps zum Artikel

10 Kommentare

  1. Christian 11. April 2011

    Vielen Dank für diesen Artikel.
    Zufällig bin ich seit wenigen Tagen auch zum ersten Mal in meinem Web-Worker-Leben mit dem Thema „rtl“ für einen Online-Katalog beschäftigt. Dein Artikel hat mir sehr geholfen!

    • Hallo Christian,

      ja, ich selbst hatte das Thema bisher auch immer ein wenig ignoriert…dabei ist es ja eigentlich gar nicht so kompliziert, vor allem wenn man das CSS Janus Tool zur Hilfe nimmt. Und so kann ein WP-Theme oder wie in deinem Fall ein Online-Katalog einfach ein so viel breiteres Publikum ansprechen :-)

      Viele Grüße,
      Ellen

  2. AlexWorld 19. Mai 2011

    Hallo, ich möchte ein WP in deutsch, englisch und arabisch erstellen und es klappt auch mit der Übersetzung der jeweiligen Seiten in die richtige Sprache. Nur wo kann ich einstellen das deutsch und englisch mit der normalen style.css dargestellt wird und beim umschalten zu Arabisch die rtl.css verwendet wird?!
    Ich benutze das Plugin „qTranslate“ und das Standarttemplate „Twenty Ten“ bei dem schon ein rtl.css vorhanden ist.
    Arabsich wird richtig dargestellt – jedoch nicht von rtl…. kann jemand helfen wo ich dies einstellen kann oder mit welchen Sparchplugin dies automatisch funktioniert?
    Danke
    AlexWorld

    • Hallo Alex,

      normalerweise sollte die Erkennung der rtl.css automatisch funktionieren, wenn der Computer die Sprache entsprechend unterstützt. Eventuell hängt das Problem mit dem qTranslate Plugin zusammen? Ich bin mir nicht ganz sicher, da ich das Plugin selbst nicht verwende. Am besten du testest die rtl-Unterstützung deines Themes einmal ohne das Plugin und schaust, ob es dann funktioniert. So kommst du dem Problem eventuell schon ein Stück näher.

      Viele Grüße,
      Ellen

      • AlexWorld 20. Mai 2011

        Hallo Ellen,
        leider erkennt WP die rtl.css nicht automatisch – wie auch? Im Template »Twenty Ten« kann man die css-Datei für den ganzen Blog (also für alle Sprachen) im Adminbereich umstellen… jedoch nicht für einzelne Sprachen.
        Auch wenn man eine Seite in arabisch ohne SprachPlugins »qTrans­late«, »xili-language« oder »WPML Multilingual« erstellt, so kann man weder im WYSIWYG-Editor noch auf der Seite selbst eine rtl.css einstellen.
        So wie es aussieht kann man nur den ganzen Blog von ltr zu rtl umstellen.
        Schade – ich werde wohl oder über wieder ohne WordPress eine dreisprachige Webseite erstellen müssen. Das hätte mir viel Arbeit erspart.
        Sollte noch jemand einen Weg mit WP kennen dann bitte melden.
        Danke AlexWorld

  3. Ich baue mit dem qTrans­late Plugin gerade an einer multilingualen Website für einen Kunden in Abu Dhabi (http://www.provita-me.com) erstellt und hatte zunächst das gleiche Problem. Wenn man mit dem Language Switcher die Sprache umstellt, muss auch das jeweils passende Stylesheet (style.css oder rtl.css) geladen werden.

    Anstelle von:

    <link rel="stylesheet" type="text/css" media="all" href="" />
    
    kopiert man das in "header.php":
    
    <?php _e(""); ?>
    

    Hinweis: "en" steht hier für Englisch und "ar" für Arabisch – die entsprechenden Sprachkennungen findet man in der Doku.

  4. Frank Limbacher 19. August 2011

    Der Code in meinem Kommentar wurde nicht vollständig übernommen, so hilft es natürlich nichts.

  5. Enjoying the service of Odyssey – Streaming – Radio is so easy.
    Hardware mechanisms used in the manufacturing of a Wi – Fi internet radio system is less
    complicated and the point of ergonomics is kept in mind by the manufactures.
    Yours Truly, Johnny Dollar: The Duke Red Matter (Part One; CBS,
    1956)’Abbott Stables’s Duke Red is a thoroughbred destroyed over a serious injury in an accident, and Dollar (Bob Bailey)’asked to review a $65,000 insurance claim on the horse’smells trouble when the stable’s business manager is dismissed after filing the claim, and its veterinarian may have destroyed the horse a little too swiftly.

  6. Hallo zusammen, ich habe potentielle Kunden aus Ägypten. Eine andere Agentur hat mir gesagt, prinzipiell wäre Typo3 besser für die Erstellung von arabischen Sprachversionen. Ist dem so???

    • Hallo Melanie,
      leider habe ich mit Typo3 keine Erfahrung, aber WordPress selbst gibt es auch in einer arabischen Sprach-Version. Und Themes oder Plugins könntest du immer auch selbst mit Hilfe des „Codestyling Localization“ Plugins übersetzen. Du solltest aber darauf achten, dass das von dir genutzte Theme RTL-Sprachen unterstützt.
      Ich hoffe diese Tipps helfen dir weiter.
      Viele Grüße,
      Ellen

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *