Sprachabhängige Inhalte über CSS definieren

Nutzbar ab: Version 009.008.000.000

06. Okt 2015

In mehrsprachigen Projekten haben Sie mehrere Möglichkeiten, Texte innerhalb Templates und auch CSS sprachabhängig auszugeben.

Über den Pseudo-Selektor before und after können Inhalte direkt im CSS definiert werden. Mit dem Pseudo-Selektor lang oder der Weblication® spezifischen lang-de Klasse kann das auch sprachabhängig geschehen.

Inhalte, die mehr oder weniger Layout-Charakter haben, lassen sich optimalerweise direkt im CSS definieren. Beispiele hierfür sind Weiter-Links oder Kurzbezeichnungen, wie z.B. "Datum", "von", "bis", Doppelpunkte und beliebige UTF-8 Sonderzeichen.

.listDefault_var0 .listEntryDescription:after               {content:"Mehr";text-decoration:underline;cursor:pointer;}
.listDefault_var0 .listEntryDescription:hover:after         {text-decoration:none}

Sprachspezifische Variante über Weblication-Klasse ergänzen

html.lang-en .listDefault_var0 .listEntryDescription:after  {content:"Read more"} 

Sprachspezifische Variante über Pseudo-Selektor lang ergänzen

html:lang(en) .listDefault_var0 .listEntryDescription:after  {content:"Read more"} 

Sie können die Texte auch aus der Textbaustein-Datei des Projektes (Grundlage: BASE Projekt) ziehen. Über den Platzhalter $wText[xxx] (xxx steht für den Textbausteinname) wird die Framework-Funktion wTexts::getText angesprochen, welche somit die allgemeine Textdatei des Sprachprojektes für die Ausgabe der Texte heranzieht.
Innerhalb der eckigen Klammer notieren Sie für die entsprechende Sprache vor dem Textbausteinname das jeweilige Sprachkürzel mit Doppelpunkt (z.B. [en:list_more]).

.listDefault_var10000 .listEntryDescription:after               {content:'$wText[list_more]...';float:right;text-decoration:none;margin-top:10px;padding:4px 12px;background-color:#f0f0f0}
html.lang-en .listDefault_var10000 .listEntryDescription:after  {content:'$wText[en:list_more]...';float:right;text-decoration:none;margin-top:10px;padding:4px 12px;background-color:#f0f0f0}

Damit diese CSS-Technik auch sprachabhängig eingesetzt werden kann, können Sie entweder die über Weblication® ergänzte Sprach-Klasse oder den Pseudo-Selektor lang nutzen. Im Beispiel wird der CSS-Inhalt für die englische Sprache mit dem Wert "Read more" überschrieben.

Nach diesem Prinzip können Sie beliebige Layout-Inhalte über CSS ergänzen, ohne dabei in die Sprachfalle zu tappen. Die über die Pseudo-Attribute before und after definierten Inhalte können zudem ohne jegliche Template-Anpassung durchgeführt werden, was ein weiterer Vorteil darstellt, da Templates ohne Anpassungen generell update-fähig sind.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG