Web Style Sheets
CSS tips & tricks

Figures & captions

HTML doesn't have an element that allows to insert a figure with a caption. It was once proposed (see HTML3), but never made it into HTML4. Here is one way to simulate such a figure element:

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Eiffel tower">
  <p>Scale model of the
    Eiffel tower in Parc Mini-France
</div>

Then in the style sheet you use the class "figure" to format the figure the way you want. For example, to float the figure to the right, in a space equal to 25% of the width of the surrounding paragraphs, these rules will do the trick:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

In fact, only the first two declarations (float and width) are essential, the rest is just for decoration.

Scaling the image

There is one problem here, and that is that the image may be too wide. In this case, the image is always 136 px wide and the DIV is 25% of the surrounding text. So if you make the window narrower, it may be that the image overflows the DIV (try it!).

If you know the width of all images in the document, you can add a minimum width to the DIV, like this:

DIV.figure {
  min-width: 150px;
}

Another way is to scale the image itself. That's what we have done with the image on the right here. As you can maybe see if you make the window very wide, JPEG images don't scale very well. But if the image is a diagram or a graph in SVG format, scaling in fact works beautifully. Here is the mark-up we used:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez and its
    fort in the evening sun
</div>

And this is the style sheet:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

The only addition is the last rule: it makes the image as wide as the inside of the DIV (the area inside the border and the padding).

Putting the caption on top

You can even put the caption on top, by telling the browser that the figure should be formatted as a table. Just add these rules to the style sheet from the previous sections:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

The '+' causes the rule to match a P that follows another P. Which means in this case that it matches the second P of the figure, the one that contains the caption.

(This technique may expose some bugs in older browsers, especially when combined with scaling the image, as I did here.)

Figures in XHTML

The current (January 2003) proposal for XHTML2 has a CAPTION element, which may be used with OBJECT. If that proposal is accepted, it will no longer be necessary to use DIV and CLASS, but, at least in XHTML2, you can write:

<object data="eiffel.jpg">
  <caption>Scale model of the
    Eiffel tower in Parc
    Mini-France</caption>
</object>