CSS: Abkürzungen sorglos drucken

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

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.

HierĂĽber tooten?

Ăśber mich

Jens Oliver Meiert, am 30. September 2021.

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Bücher für O’Reilly und Frontend Dogma. Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.

Wenn du eine Frage oder Anregung zu dem hast, was ich schreibe, sende bitte jederzeit eine Nachricht. Danke!