Eine nichts sagende Bildunterschrift, die auch noch an der richtigen Stelle umbricht.

Bilder in Blog-Artikeln sind eine schöne Sache. Nur habe ich festgestellt, dass die Sache mit zunehmender Anzahl von Bildern immer chaotischer wird. Während der Autor in der Regel wissen sollte, auf welchen Inhalt sich ein Bild bezieht, weiß das der Besucher in der Regel nicht unbedingt. Darum hat sich in den anfassbaren Medien die Bildunterschrift etabliert. Doch auf diese sinnvolle Angelegenheit ist das w3c wohl noch nicht gekommen - in XHTML und CSS ist weit und breit keine Spur von expliziten Bildunterschriften. Man muss sich also was einfallen lassen.
Meine erste Idee war: Semantisch alles korrekt machen und das Design hinmurxen. Warum unnötige Arbeit? Mit dem ‘alt’-Attribut ist doch schon eine Bildunterschrift gleich in der Definition mit drin. Die müsste man bloß noch irgendwie rausfischen und anzeigen. So würde das aussehen:
Im HTML:

<img class="BildMitUnterschrift" alt="Eine ausführliche Bildunterschrift" src="Pfad/zum/Bild"/>

Im CSS:

img.BildMitUnterschrift:after {
content: attr(alt);
}

So ungefähr zumindest. Wie oben beschrieben wäre es mehr eine Bildnebenschrift, da die Angaben zur Positionierung noch fehlen - und das aber auch in nur in Opera. Denn alle anderen Browser weigern sich, ‘attr(alt)’ anzuerkennen. (Was es genau mit ‘content’ auf sich hat, habe ich hier schon mal erklärt.) Mit einer Kompatibilität von ganzen 2% aller Browser lässt sich nichts anfangen.
Die zweite Möglichkeit wäre der Klassiker. Bild und Unterschrift in einen Container packen, dann schön klassisch positionieren. Das ist sowohl im Quelltext als auch im CSS ein heiden Chaos und ziemlich unelegant. Tabellen für Design sind seit CSS ein Tabu - da darf man erst gar nicht daran denken!
Eine semantisch korrekte und zudem auch sehr elegante Möglichkeit weiß Ulrike Häßler. In den Tiefen des HTML-Standards gibt es einen Tag, der kaum benutzt wird: Das Listenelement <dl>. Es ist dazu da, Definitionen auszuzeichnen. Es hat also noch die Unterelemente <dt> für den Terminus und <dd> für die Definition. Und was sollte einen davon abhalten, ein Bild reinzupacken und dieses dann zu definieren?
Im HTML:

<dl class="imgleft" style="width: 100px;">
<dt><img src="/pfad/zum/bild" alt="Beschreibung"\></dt>
<dd>Eine ausführliche Bildunterschrift</dd>
</dl>

Im CSS:

dl.imgleft{
float: left;
margin-right: 15px;
margin-bottom: 5px;
/**max-width:100px; **/ /**(1)**/
}

dl.imgleft dd {
margin: 0;
}

Der CSS-Fetzen sorgt auch gleich dafür, dass die Bildunterschrift unter dem Bild steht (dafür sind die genullten margins nötig).
Einen Schönheitsfehler hat die Sache aber. Damit die Unterschrift genau am Rand des Bildes umbricht, muss man dem CSS die Bildbreite mitteilen. Somit ist entweder im HTML für jedes Bild ein ’style=”width:x ;”‘ nötig oder - sofern alle Bilder die gleiche Breite haben - im CSS ein ‘max-width’ (Markierung 1). Somit wäre eine Bildunterschrift semantisch richtig, valide und komfortabel(?) definiert.
Wem diese Informationen noch nicht reichen, der kann noch die Meinungen eines Befürworters oder eines Gegners lesen.

Nachtrag: Quasi parallel zu diesem Blogeintrag hat sich auch webdesign-in.de Gedanken über die richtige Art der Bildunterschrift gemacht. Die durch und durch gelungene Abhandlung kommt aber auch zu dem Schluss, dass <dl> wohl die eleganteste Lösung ist. Interessant sind aber auch die Anmerkungen zur Barrierefreiheit.

Dieser Eintrag wurde am Mittwoch, 5. Oktober 2005 um 18:15 erstellt und ist unter Webdesign abgelegt. Du kannst jegliche Antworten zu diesem Beitrag über den RSS 2.0-Feed verfolgen. Du kannst Kommentare schreiben, indem du hier eine Antwort hinterlässt oder einen Trackback von deiner Seite setzt.