CSS: Abkürzungen sorglos drucken

Artikel vom 30. Dezember 2003 (↻ 15. März 2008), exklusiv für Dr. Web. ISSN 1614-3124, #3. Schwerpunkt: Webentwicklung (RSS-Feed für alle Themen).

Gebraucht man Abkürzungen, macht man ihre Bedeutung zwar idealerweise auch innerhalb des Textes oder eines Glossars, aber vor allem mittels title-Attributen zugänglich – wird die Seite jedoch ausgedruckt, weiß der Benutzer oft nicht, wofür sie stehen. CSS 2 bietet Abhilfe.

Zaubern mit CSS

Gemäß HTML- und XHTML-Spezifikation stehen zur semantischen Hervorhebung von Abkürzungen und Akronymen die korrespondierenden Elemente abbr und acronym zur Verfügung, deren Bedeutung bei vorhandenem title-Attribut von nahezu allen Browsern mittels Tooltip-Verhalten veranschaulicht wird:

<acronym title="World Wide Web">WWW</acronym>

Druckt man die entsprechende Seite aus, bleibt jedoch nur ein für Unbedarfte sinnleeres »WWW« stehen. Mit CSS ist es über folgenden Selektor und die zugehörige Deklaration aber möglich, auch den Wert des title-Attributs auszugeben, vorausgesetzt, der entsprechende print-Medientyp wird angesprochen:

acronym[title]:after {
  content: ' (' attr(title) ')';
}

Der Attributselektor [title] stellt hierbei sicher, dass title definiert wurde, andernfalls würde die Deklaration nicht angewandt. Nun erhält man, sofern man einen halbwegs neuen Browser von Opera oder einen Gecko-Abkömmling nutzt, die aussagekräftigere Druckversion:

WWW (World Wide Web)

Setzt man auch das sowohl im zukünftigen XHTML 2.0 als auch HTML 5 – im Gegensatz zu acronym – vermutlich weiterhin erlaubte abbr-Element ein, braucht man beide Selektoren lediglich zu gruppieren, um die Deklaration für beide Elemente den gewünschten Effekt haben zu lassen:

acronym[title]:after,
abbr[title]:after {
  content: ' (' attr(title) ')';
}

Selbstredend ist diese Methode beliebig einsetz- und veränderbar. Auf Websites mit starkem Gebrauch von Abkürzungen empfiehlt es sich übrigens, jede Kurzform nur einmal zu erklären, das title-Attribut also nur beim ersten Vorkommen einer Abkürzung innerhalb eines Dokuments zu verwenden, soll vor lauter umklammerten Erläuterungen noch etwas zu erkennen sein.

Über mich

Ich bin Jens (lang: Jens Oliver Meiert), und ich bin ein Frontend-Engineering-Leiter und technischer Autor/Verleger. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin Mitwirkender an verschiedenen Webstandards und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Ich experimentiere gerne, nicht nur in der Webentwicklung (und im Engineering Management), sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Erfahrungen und Ansichten. (Bitte sei kritisch, interpretiere wohlwollend und gib Feedback.)