Automatic Captions

Original Experiment Date
June 5, 2003

Whilst writing the article on scientific publishing with XHTML and CSS, I needed a way to automatically number tables and figures. Using CSS counters and generated content this proved to be easily possible.

As an additional bonus it is further possible to create auto-generated captions for tables and images, by extracting the information from the title and summary attribute on the table. By then applying display:table-caption; the information is positioned as a caption on the table. This provides a minimal markup and interesting use of the semantic properties of the attributes.

This technique has already been put to practical use in, for example, my Opera 8 tutorial where the alt-information of the images is used as caption, by positioning it with respect to the image.

A demo page for automatic captions.
Automatic table numbering eases the authoring and maintenance of the page. The automatic captions showcase an interesting use of the semantic properties of the attributes.
Very limited support for CSS generated content in browsers, and as a result the caption would be unavailable to most users.
Browser support
Opera 7+

© 2003-2006, Mark Schenk.