Sprachabhängige Inhalte über CSS definieren

Nutzbar ab: Version 009.008.000.000

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

/*@wCssFragment{class:listDefaultLink;variant:32;caption:Als transparente Schaltfläche rechts;caption-en:As ghost button right;livepreview:yes}*/
.listDefaultLink_var32 {

  -w-displayElements:link=yes;

  .listEntryLink {
    text-align:right;

    a {
      @extend .linkButtonGhost;
      html[lang="de"] & { content:wGetText('de:list_more'); }
      html[lang="en"] & { 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.