Advanced CSS - Sprachauszeichnungen

1. Mehrsprachigkeit

Was ich euch nun zeige, sollte man meiner Meinung nach eigentlich nur dann einsetzen, wenn man auf den einzelnen Seiten Inhalte in mehreren Sprachen hat. Wenn man also zum Beispiel bei deutschem Text mit französischen und englischen Zitaten arbeitet. Oder man muss einen Auftritt barrierearm umsetzen und dabei dann Screenreader berücksichtigen. Gut, Letzteres hat mit CSS nichts zu tun, aber ist eh wurscht.

2. Das HTML-Attribut

... dazu lautet lang und wird einfach in das gewünschte HTML-Tag gepackt. Die Sprache selber wird nach dem entsprechenden Wert des Sprachcodes ISO 639-1 angegeben. Man kann aber auch die ausführliche Version à la de-CH nehmen.


<p>Wie sagte schon der olle Shakespeare?</p>
<blockquote lang="en">To be or not to be.</blockquote>
<p>Und der Franzose meint</p>
<blockquote lang="fr">Cest la vie</blockquote>

3. Die CSS-Anweisungen

Im Gegensatz zu den anderen Pseudoklassen und -elementen muss man hier keine Auswahl über den Selektor vornehmen, kann es aber.


:lang(en) {
  font-style: italic;
}
blockquote:lang(fr) {
  text-decoration: underline;
}

4. Zitate

kennt ihr das Problem? Die Deutschen zitieren anders als die Engländer, die zitieren anders als die Franzosen und so weiter und so fort. Das kann wunderbar per CSS steuern und zwar so.


:lang(en) {
  quotes:"\201C" "\201D" "\2018" "\2019";
}

:lang(fr) {
  quotes:"\00AB" "\00BB" "\2039" "\203A";
}

Erläuterung

Mit quotes legt man die Anführungszeichen fest. Anschließend muss man leider die Sonderzeichen als maskierten Hexadezimalwert angeben. Eine komplette Übersicht dazu findet ihr hier. Das Schema selber sieht so aus:


          [Doppeltes Anführungszeichen Anfang] [Doppeltes Anführungszeichen Ende]

          [Einfaches Anführungszeichen Anfang] [Einfaches Anführungszeichen Ende]

Anschließend arbeitet man mit den schon bekannten :before, :after sowie content.


blockquote:before { content:open-quote; }
blockquote:after { content:close-quote; }

So, jetzt muss man nur noch wissen, was die Heinis in den unterschiedlichen Ländern benutzen. An diesen paar Beispielen könnt ihr aber sicher erkennen, was man für Möglichkeiten hat.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt