Sprachabhängige Inhalte über CSS definieren
Veröffentlichungsdatum: 21. Februar 2020
Änderungsdatum: 25. Juli 2024
weblication cms css css-only texte wtext textbausteine sprache sprachabhängig spachprojekte multi weiter mehr more
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 bzw. auch Textbausteinen 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.
Nachfolgend werden die Möglichkeiten bezogen auf die unterschiedlichen Projektgrundlagen aufgezeigt.
Definition über CSS Content Property
Beispiel: Weiter-Link rein über CSS definieren
.listEntryLink {
text-align:right;
a {
html[lang="de"] & { content:'Mehr erfahren...'; }
html[lang="en"] & { content:'Find out more...'; }
}
}Definition über CSS Content Property und Pseudo-Klasse
Beispiel: Sprachspezifischer mehr-Link über html Pseudo-Klasse ergänzen
/* einem im gesamten klickbaren Listeneintrag Content nach der Beschreibung ergänzen */ .listEntryDescription:after {content:'mehr lesen ...';float:right;text-decoration:none;margin-top:10px;padding:4px 12px;background-color:#f0f0f0} @at-root html:lang(en) #{&} .listEntryDescription:after {content:'read more ...';float:right;text-decoration:none;margin-top:10px;padding:4px 12px;background-color:#f0f0f0}
Definition über CSS Content Property und Textbausteine im CSS
Sie können die Texte auch aus der Textbaustein-Datei des Projektes ziehen.
Über die Angabe wGetText(xxx) (xxx steht für das Sprachkürzel mit Angabe des Textbausteinnamens) wird die Framework-Funktion wTexts::getText angesprochen, welche somit die allgemeine Textdatei des Sprachprojektes für die Ausgabe der Texte heranzieht.
Innerhalb der runden Klammer notieren Sie für die entsprechende Sprache vor dem Textbausteinname das jeweilige Sprachkürzel mit Doppelpunkt (z.B. 'de:list_more').
Beispiel: Sprachspezifischer Text über Weblication-Klasse ergänzen
/*@wCssFragment{class:listDefaultDescription;variant:10;caption:Darf Bild umfließen;caption-en:May surround image;livepreview:yes}*/ .listDefaultDescription_var10 { -w-displayElements:description=yes; -w-option-description-cropText:0; /* Beschreibungstext limitieren [0(Nein)|1(Ja)]*/ -w-option-description-lengthCrop:128; /* Anzahl der Zeichen, die maximal ausgelesen werden sollen */ -w-option-description-shrinkCharacterCrop:'word'; /* Zeichen, bei dem beendet werden soll 'word' für Wort, '.' für Satz */ -w-option-description-delimiterCrop:'...'; /* Falls die Zeichenkette über "lengthCrop" reduziert wurde, wird sie durch die angegebenen Zeichen ergänzt. */ .listEntryDescription { display:block; html[lang="de"] &:after { margin-left:12px;padding:4px;border:1px solid grey;content:wGetText('de:list_more'); } html[lang="en"] &:after { margin-left:12px;padding:4px;border:1px solid grey;content:wGetText('en:list_more'); } } }
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" (aus dem Textbaustein "list_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.
Definition über CSS Content Property
Weiter-Link rein über CSS definieren
.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"}
Definition über CSS Content Property und Pseudo-Klasse
Sprachspezifische Variante über Pseudo-Klasse lang ergänzen
/* einem im gesamten klickbaren Listeneintrag Content nach der Beschreibung ergänzen */ html:lang(en) .listDefault_var0 .listEntryDescription:after {content:"Read more"}
Definition über Textbausteine im CSS
Sie können die Texte auch aus der Textbaustein-Datei des Projektes ziehen.
Bei Grundlage eines BASE Classic Projektes ist dies wie folgt möglich.
Ü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]).
Sprachspezifische mehr-Link über Weblication-Klasse und mit Text-Baustein ergänzen
.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 die Pseudo-Klasse lang nutzen. Im Beispiel wird der CSS-Inhalt für die englische Sprache mit dem Wert "Read more" (aus dem Textbaustein "list_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.