Jens Oliver Meiert

CSS: Abkürzungen sorglos drucken

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

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 wirklich 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 den Autor

Jens Oliver Meiert, Foto vom 27. Juli 2015.

Jens Oliver Meiert ist ein deutscher Philosoph und Entwickler (Google, W3C, O’Reilly). Er experimentiert mit Kunst und Abenteuer. Hier auf meiert.com teilt und verallgemeinert und übertreibt er einige seiner Gedanken und Erfahrungen.

Mehr Jens gibt es im Archiv und bei Amazon. Wenn Sie eine Frage oder ein Anliegen (oder eine Empfehlung) zu dem haben, was er schreibt, senden Sie gerne jederzeit eine Nachricht.

Ähnliche Themen

Das könnte Sie ebenfalls interessieren:

Schwerpunkt:

Oder vielleicht auf Google+, Twitter oder XING hallo sagen?

Fehler entdeckt? Belohnung! E-Mail an jens@meiert.com.

Sie sind hier: StartseitePublikationen → CSS: Abkürzungen sorglos drucken

Stand: 15. März 2008.

»Lächle.«