CSS

Abkürzungen sorglos drucken

30. Dezember 2003
von

Gemäß HTML- und XHTML-Spezifikation stehen zur semantischen Hervorhebung von Abkürzungen und Akronymen die korrespondierenden Elemente abbr und acronym zur Verfügung, deren Sinn man mittels Tooltip veranschaulichen kann. Wir zeigen, wie es auch im Ausdruck klappt.

 <acronym
title="World Wide Web Consortium">W3C</acronym>

Druckt man die entsprechende Seite aus, bleibt nur ein für Unbedarfte sinnleeres “W3C” 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 verwendet:

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

Der Attributsselektor [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 Mozilla-Abkömmling nutzt, die aussagekräftigere Druckversion:

W3C (World Wide Web Consortium)

Setzt man auch das im zukünftigen XHTML 2.0 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 Seiten mit starkem Gebrauch von Abkürzungen empfiehlt es sich außerdem, die Bedeutung jeder Kurzform nur einmal zu erklären, soll bei lauter umklammerten Erläuterungen noch etwas zu erkennen sein.

 foto

Jens O. Meiert, Webentwickler und Informationsdesigner (Google, W3C) und Autor (O’Reilly), ist spezialisiert auf professionelles Webdesign, Webentwicklung, Barrierefreiheit und Usability.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!

*