Zum Inhalt springen

TYPO3 für arabische Sprachen konfigurieren

Einleitung

Die Verwendung mehrerer Sprachen im Backend und Frontend einer TYPO3-Website gehört schon lange zum Standardrepertoire des CMS. Diese Sprachen sind in der Regel auch recht schnell eingerichtet und konfiguriert.

Ein wenig spezieller wird es bei der Verwendung arabischer Sprachen, da hier nicht nur völlig andere Zeichen verwendet werden, sondern auch die Textrichtung umgekehrt wird.

Mit den folgenden Einstellungen kann man aber auch arabische Sprachen im Frontend und Backend nutzen.

Backend

1. Sprache herunterladen

Im Sprachenmodul "Arabisch" hinzufügen und herunterladen. Das Backend ist allerdings nur teilweise ins arabische übersetzt. Einige Menüpunkte oder Bezeichnungen von Formularelementen wurde bisher nicht übersetzt. Hier wird dann die englische Standardbezeichnung ausgegeben.

2. Installtool

Im Installtool den Parameter [SYS][UTF8filesystem] aktivieren.

Alternativ kann man diesen Parameter natürlich auch direkt in der LocalConfiguration.php setzen.

3. Backend in Arabisch

Bei Bedarf kann jetzt ein Backend-Benutzer in seinen Kontoeinstellungen auf Arabisch umschalten.

Sofern Extensions arabische Übersetzungen mitbringen, werden Elemente dieser Extensions (z.B. felogin) dann auch im Frontend korrekt angezeigt.

4. Texteditor konfigurieren (RTE, CKEditor)

Patrick Crausaz hat auf Github Code bereit gestellt, mit dem im CKEditor entsprechende Schaltflächen zur Umschaltung der Schreibrichtung zu konfigurieren.

Frontend

1. Sprache anlegen

In das Web-Modul Liste wechseln, Sprache auf der Root-Ebene anlegen.

2. TypoScript

Spracheinstellungen im TypoScript-Setup vornehmen. Die Zahl in der Condition ist die ID der Sprache. In diesem Beispiel hat Arabisch die ID 2.

[globalVar = GP:L = 2]
config {
    sys_language_uid = 2
    language = ar
    locale_all = ar_AE.utf8
    htmlTag_langKey = ar
    htmlTag_dir = rtl
}
[global]

3. Textrichtung Rechts-nach-Links (RTL)

Es ist notwendig, die Richtung für alle Texte auf Rechts-nach-Links zu setzen. Das erreicht man mit dem HTML-Attribut dir="RTL", wobei RTL Right-To-Left bedeutet, und nichts mit dem intellektuellen Fernsehsender für Hochbegabte zu tun hat.

In TYPO3 bietet der integrierte Texteditor HTML-Area die Option an, zwischen der Ausrichtung umzuschalten. Dafür gibt es zwei Schaltflächen, um die Textrichtung eines Absatzes zu bestimmen. Diese Schaltflächen sind in der Standardeinstellung aber nicht sichtbar und können auf zwei Arten aktiviert werden:

Schnelle Methode:
Setzen des Demo-Modus für die HTMLArea: das ist in den Optionen der Extension im Erweiterungsmanager einstellbar.

Empfohlene Methode:
Hinzufügen der folgenden Zeile PageTSconfig:

RTE.default.showButtons := addToList(righttoleft,lefttoright) 

Zusätzliche sollte das dir-Attribut auch für das <html>-Tag gesetzt werden. Dazu folgende Zeile TypoScript-Setup verwenden:

config.htmlTag_dir = rtl

Das sollte dann natürlich, wie unter Punkt 2 schon zu sehen, innerhalb der Condition für die Sprache verwendet werden.

4. CSS

Dadurch dass der Texte jetzt in eine andere Richtung läuft, sind eventuell Anpassungen im CSS notwendig. Dazu kann man z.B. abhängig von der Sprache eine angepasste CSS-Datei einbinden, in der die Standardanweisungen überschrieben oder ergänzenden Anweisungen hinzugefügt werden:

[globalVar = GP:L = 2]
page.includeCss.100 = EXT:myext/Resources/Public/Css/arabic-styles.css
[global]

5. RealUrl

Sobald man für Seiten im Backend eine arabische Übersetzung angelegt hat und auch den Seitentitel auf arabisch übersetzt hat, werden auch URLs mit arabischen Schriftzeichen dargestellt, z.B. domain.de/اليسار.html
Das funktioniert so jedoch nicht, der Aufruf dieses Links führt zu einem Fehler.

Bei Verwendung von RealUrl >= 2.1.0 kann man in der realurl_conf.php im Bereich pagePath eine Liste von Sprach-IDs definieren, die dann nicht mehr für die Übersetzungen der URLs benutzt werden. Hier werden dann einfach die Seitentitel der Standardsprache verwendet. Über den Paramater languageExceptionUids kann man eine kommaseparierte Liste von Sprach-IDs übergeben (oder natürlich auch nur eine ID). Nähere Infos dazu in der Doku von RealUrl: github.com/dmitryd/typo3-realurl/wiki/Configuration-reference

Der Abschnitt in der realurl_conf.php könnte dann z.B. so aussehen, wenn man die Sprache mit den IDs 2 und 3 ausschließen will:

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['realurl'][$domain1] = array(
    'pagePath' => array(
        'spaceCharacter' => '-',
        'expireDays' => '3',
        'rootpage_id' => '1',
        'languageExceptionUids' => '2,3',
    ),

6. Weitere Anpassungen im Frontend

Eventuell sind, je nach Layout der Website, weitere Anpassungen notwendig. Wenn z.B. in der Standardsprache eine vertikale Navigation auf der linken Seite verwendet wird, die vielleicht auch noch Unterseiten per Flyout-Menü anzeigt, kann es notwendig sein, für die arabische Sprache diese Navigation auf die rechte Seite zu verlagern und auch die Richtung des Flyouts zu ändern. Das sind aber Anpassungen, die per CSS vorzunehmen sind. Hier könnte man, wie unter Punkt 4 schon erwähnt, einfach angepasste CSS-Dateien für Arabisch einbinden. Auf die gleiche Art, also über die Condition, könnte man bei Bedarf auch angepasste JavaScript-Dateien einbinden.

7. Texte von Extensions übersetzen

Nicht jede Extension bringt von Haus aus eine arabische Sprachdatei mit. Aber per TypoScript kann man recht einfach selber Übersetzungen hinzufügen.

Als Beispiel wird hier der Text des "More"-Buttons der Extension ws_flexslider übersetzt, sowohl für Arabisch als auch für Deutsch:

plugin.tx_wsflexslider._LOCAL_LANG {
	ar.more = أكثر
	de.more = Mehr erfahren
}

Die Bezeichnungen der Elemente kann man in den Sprachdateien einer Extension nachlesen. Diese sogenannten Label sind in einer XML- oder XLF-Datei hinterlegt. In unserem Beispiel mit der Extension ws_flexslider wäre das die Datei

typo3conf/ext/ws_flexslider/Resources/Private/Language/locallang.xml

Aktualisiert: 04.05.2023