Image Caption

Image caption are often found on the web, but there is no standard markup for this.

Problem Description

Currently, most people use either a table, custom class names, or simply put the image inside a paragraph, each option either conveying a wrong meaning or being ambiguous with the rest of the content.

An interesting analysis has been done on the subject by Dan Cederholm in one of his SimpleQuiz. His conclusion:

So in this case, I might choose option A -- because visually it shows the relationship between the items better than the others. But I suppose this is bad semantics. Or maybe just another case where we don't have the 'perfect' set of defined elements for this (very) specific job.

And his option A was:

<p><img scr="..."><br />
   Caption Text</p>

In other word, he could not figure out anything good using current elements available in HTML, and, as most people do, had to create his own solution.

Setting a standard for such things -- an explicit association between the caption and the illustration -- would help image search engines, it could enable the automatic creation of a figure index for a page. It would also be benificial for sight-impaired users. The fact that image captions should be treated differently to body text (they are not in the main flow of the document) suggests this element could be important for figure handling by assistive tools allowing e.g. aural browsers to skip captions except on explicit user request.

Current Methods and Workarounds

See Image Caption Examples for a couple of sample cases.

Proposed Solutions

<figure> with

A <figure> element contains illustrative content for the current section. It can contain a element, either as the first or the last child, that will be used to describe or give a caption to the content of the figure.

<figure>
  <caption>Caption Text</caption>
  <img src="...">
</figure>

Processing Model

The processing model for HTML files must be changed so that the is no longer ignored when outside the context of a table. It could also be a good idea to add a new figure insertion mode that would prevent figure captions from being moved to the enclosing table when inside a table cell, otherwise <figure> will break in table-based layouts.

<table>
<tr><td>
  <figure>
    <caption>Caption Text</caption>
    <img src="...">
  </figure>
</td></tr>
</table>

Limitations

being ignored by current browsers when outside a table makes it impossible to style, and it'll also be terribly broken with table layouts when figure captions end up at the top (or the bottom) of the enclosing layout table.

Implementation

Parsing changes in this solution could be hard to implement given element's legacy within

. Putting aside the parsing problem, there's not much else to implement for visual browsers. A good display model that could be used to display figures is already available in CSS 2.1:

figure { display: table; }
caption { display: table-caption; }

This would display the figure as a one-cell table, and the caption either at the top or at the bottom (depending on the caption-side property). The interesting part of this model is that the caption's width is constrained by the width of the figure, making it the ideal choice for floated figures.

Adoption

The syntax is pretty straightforward to use. "figure" and "caption" are commonly used terms to designate exactly this feature in the print world. It should be a natural choice to authors that wonder how to markup their images.

This markup won't work however if an author wants the caption to be elsewhere in the document. (In this proposal,

is pinned to the figure's content.) It does not seem a common use case however.

<figure> with <legend>

A <figure> element contains illustrative content website design for the current section. It can contain a <legend> element, either as the first or the last child, that will be used to describe or give a caption to the content of the figure.

<figure>
  <legend>Caption Text</legend>
  <img src="...">
</figure>

Processing Model

To be completed

Limitations

To be completed

Implementation

A good display model that could be used to display figures is already available in CSS 2.1, the table model. A default stylesheet could look like this:

figure { display: table; }
figure legend { display: table-caption; }

This would display the figure as a one-cell table, and the figure legend either at the top or at the bottom (depending on the caption-side property). The interesting part of this model is that the legend's width is constrained by the width of the figure, making it the ideal choice for floated figures.

Adoption

"figure" and "legend" are commonly used terms in the print world, so their use could prove natural to authors. It is most likely that authors that need a markup for their figure will chose this one if it is sanctioned in a standard.

This markup won't work if an author wants the caption to be elsewhere in the document. (In this proposal, <legend> is pinned to the figure's content.) It does not seem a common use case however.

Adjacent

or <legend>

or <legend> elements directly following a <img> element give the caption text for that image.

<img src="...">
<caption>Caption Text</caption>

<img src="...">
<legend>Caption Text</legend>

Processing Model

The processing model for HTML files must be changed so that the

is no longer ignored when outside the context of a table. It could also be a good idea to add a new figure insertion mode that would prevent figure captions from being moved to the enclosing table when inside a table cell, otherwise <figure> will break in table-based layouts.

Are the elements in this construct inline or block-level content? Currently <img> is inline.

If any other element, or non-whitespace text nodes are found between <img> and its corresponding caption element, elements are considered to not be adjacent, the semantic link is broken and it generates a parse error.

Limitations

being ignored by current browsers when outside a table makes it impossible to style, and it'll also be terribly broken with table layouts when captions end up at the top (or the bottom) of the enclosing layout table.

To be completed: <legend> parsing

Implementation

Parsing changes in this solution could be hard to implement given

element's legacy within .

To be completed: <legend> parsing implementation

Giving a distinctive visual style to figure captions may prove difficult with this design. If a browser wants to treat figures in a distinctive manner, it'll have treat them as a special case; the adjacent element selector in CSS can't distinguish between adjacent elements which are separated by text and those that are not.

Adoption

To be completed

"legend" and "caption" are commonly used terms in the print world, so their use could prove natural to authors. Difficulties in styling are likely however to cause authors to always warp figures in a

element as most already do anyway (see Image Caption Examples).

This markup won't work if an author wants the caption to be elsewhere in the document. It does not seem a common use case however.

<label> defining attributes with nested markup

A <label> element holds a value which should be treated the same way like the title attribute on <img>, except that it can contain nested markup. The for attribute of the label contains the id of the target element. A new type attribute on the label indicates which attribute the label intend to replace on the target.

<img id="img1" src="...">
<label for="img1" type="title">...</label>

Processing Model

To be completed: Attribute override, progressive rendering, etc.

Limitations

To be completed

Implementation

To be completed

Adoption

This markup has the benefit that it'll work if an author wants the caption to be elsewhere in the document.

To be completed