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

[Philip Jägenstedt]

On Tue, 01 Dec 2009 14:28:32 +0100, Lachlan Hunt  
<lachlan.hunt at lachy.id.au> wrote:

> 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.

You only need to provide styles for the elements you're using which  
wouldn't work with a simple generic style such as.

figure>[caption] { margin-left: 1em; font-weight: bold; }

Please, no examples where this doesn't work. It's obvious, but also very  
easy to fix.


> 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.

Imaginary template language:

<figure>
<@content@>
<div caption><@caption@></div>
</figure>

Does everything you could do with a new element. Almost everyone else will  
probably get by without wrapping divs though.

> 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.
>

If all of the ideas are rejected I agree that it would be better to drop  
figure, but I hope it won't come to that. A pointer to any parsing/styling  
issues of legend would be appreciated for reference.

-- 
Philip Jägenstedt
Core Developer
Opera Software