Sprachabhängige Inhalte über CSS definieren

Nutzbar ab: Version

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.

BASE (Mobile First)
BASE Classic
BASE (Mobile First)

Definition über CSS Content Property

  .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

/* 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.

BASE Classic

Definition über CSS Content Property

.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]).

.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.