[whatwg] image captions

Michel Fortin wrote:
>     <figure>
>       <caption>Figure 1: Some image</caption>
>       <img src="...">
>     </figure>

I agree that structure is the best approach.  That allows for good 
styling, by setting the following:

figure { display: table; caption-side: bottom; }
figure img { display: block; }
caption { display: table-caption; }

The only problem is that it isn't very backwards compatible.  Firefox 
doesn't include <caption> in the DOM outside of a table.  Moving the 
caption after the image in the source and setting display: block; on the 
image gives reasonable results in Firefox and Opera because the img is a 
child of figure, but not in IE because figure and img are treated as 
siblings.

Using the microformat approach instead, like the following, gives better 
backwards compatibility, but at the expense of proper semantic elements.

<div class="figure">
   <img ... >
   <p class="caption">Figure 1: Some image</p>
</div>

We could also use a single-cell table for this, but this approach could 
be considered abuse and IE doesn't seem to support 'caption-side', but 
does support the deprecated align attribute on caption.

<table class="figure">
   <caption>Figure 1: Some image</caption>
   <tr>
     <td><img ... ></td>
   </tr>
</table>

Whatever approach we eventually decide upon, it should be able to handle 
captions for a variety of strucutres, not just images.  This includes:
* Blocks of code and sample input/output
* Lists
* <object>, <embed>, <img> and maybe <iframe>

Along with tables (which already support them) I think that would cover 
every use case for captions.

-- 
Lachlan Hunt
http://lachy.id.au/

Received on Wednesday, 28 June 2006 18:17:01 UTC