[whatwg] <figure><img><* caption>

[Lachlan Hunt]

Philip Jägenstedt wrote:
> As currently speced, the proper usage of <figure> is:
>
> <figure>
> <dd><img src="bunny.jpg" alt="A Bunny"></dd>
> <dt>The Cutest Animal</dt>
> </figure>
>
> Apart from all that has been said about legacy parsing, leaking style in
> IE, etc I would (perhaps not be the first to) add:
>
> 1. It seems quite easy to confuse or mistype dd/dt. Without guessing how
> often authors will get it wrong, I think everyone agrees that (all else
> equal) a syntax which is harder to confuse/mistype is better.

Yes, I expect we'll see a lot of authors get them reversed, using the dd 
for the caption if they want the caption below the content.  This is 
likely to occur since existing authors have already learned that dt 
comes before dd when used within a dl, and because old habbits die hard, 
they're likely to repeat the pattern within figure.

> 2. Only the caption needs to be marked up, the content is implicitly
> everything else. While some content may need a wrapping element for
> styling, e.g. <img> usually does not.
>
> 3. Aesthetics. (My eyes are bleeding, but I can't speak for anyone else's.)

Some additional reasons why using dt/dd in figure is a bad solution:

The simplest workaround presented so far to solve the styling issue in 
IE is basically to do this:

<div class="figure">
   <figure>
     <dd><img src="image" alt="..."></dd>
     <dt>Caption</dt>
   </figure>
</div>

And then rather than style the figure itself, give some style to the div 
because some styles don't work properly when applied to the figure. 
This effectively makes the figure element itself entirely useless, 
especially given that all browsers lack support for it.

It would be far easier for authors to just stick with this entirely hack 
free alternative that doesn't use the new elements:

<div class="figure">
   <img src="image" alt="...">
   <p class="caption">Caption</p>
</div>

At least until browsers actually implement support for <figure> and 
IE6/7's market share becomes negligible.  It will take a couple of years 
for those events to occur, and there's no need to rush into using the 
new elements yet.

> The main difficulty with coming up with something better seems to have
> been finding a name for an element which isn't already taken. If that's
> the only issue, why not just take some inspiration from <time pubdate>
> and use an attribute instead?
>
> <figure>
> <img src="bunny.jpg" alt="A Bunny">
> <p caption>The Cutest Animal</p>
> </figure>

I was the first one to suggest that on IRC a while ago, but I'm not 
convinced it's a good idea.  Although it's certainly better than using 
dt/dd.

See IRC logs here.
http://krijnhoetmer.nl/irc-logs/whatwg/20090917#l-1525
http://krijnhoetmer.nl/irc-logs/whatwg/20090918#l-1133

The original idea for using the attribute was that it could apply to a 
wide range of elements, like p, div, etc.  But that makes it difficult 
for browsers to provide sensible default styling for captions, since it 
requires carefully overriding existing defaults for so many other elements.

To some extent, it even makes it difficult for authors to provide 
reasonable styles if they can't guarantee which elements content writers 
will choose for their caption.  Imagine designing a CMS template with 
some default styles for figure and caption, the CSS in the template 
would have to deal with so many possible element choices just for the 
caption, it'll be difficult to get it right and test everything.

Limiting the caption attribute to just the p element, or just div or 
something, might help, but I'd still expect authors to end up using it 
on other elements anyway.

There are only 2 sensible options for element choices: <legend> or 
introducing a new element.  Using dt/dd is *not* and was never a 
sensible choice for figure, and the idea must be dropped.

Since Hixie is adamant that introducing a new element for the caption 
isn't going to happen, and I've yet to find a way to convince him 
otherwise, that leaves us with legend.

Although legend has it's own styling issues in browsers, these will 
eventually be resolved in a couple of years.  Therefore, the best 
solution is to revert the spec back to using legend for figure, but 
strongly discourage authors from using these new elements yet, until the 
implementation issues are resolved.

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/