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

[Ian Hickson]

I've changed <figure> and <details> again, hopefully for the last time. 
They now have unique elements for their legends:

   <figure>
     <figcaption>...</figcaption>
     ...
   </figure>

   <details>
     <summary>...</summary>
     ...
   </details>


On Mon, 30 Nov 2009, 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.
> 
> 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.)

Hopefully this is now resolved.


> 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>
> 
> At least to me, it looks clean enough and there are no serious parsing 
> issues (just use document.createElement("figure") for IE).
> 
> The caption is easy to style with "figure *[caption]" or any number of 
> easy workarounds for browsers that don't support CSS attribute selectors 
> (IE6?).
> 
> I haven't been following the discussions on <figure> closely, so if this 
> has already been discussed and rejected please link me in the right 
> direction.

I considered this, but it makes the processing much more complicated and 
fiddly everywhere, so I don't think it's a good design.


On Mon, 30 Nov 2009, Tab Atkins Jr. wrote:
> 
> The only thing you have to answer is what to do if there are multiple 
> @caption elements in the <figure>.  I suggest taking either the first or 
> last; the exact choice is pretty much arbitrary.

That's not the only problem... you also have to worry about the attribute 
being used on elements that can't really be moved around easily, or that 
are part of content; you have to consider what happens when the caption 
gets wrapped, there's the danger of authors misunderstanding how it works 
(since it's pretty unique as a mechanism), etc.

e.g., consider:

   <details>
    Copying from volume A to X.
    Status: <span legend>54 files copied</span> of 102 total.
    23 minutes remaining.
   </details>

How would it render? What if you want to put paragraphs around each of 
those lines?


On Mon, 30 Nov 2009, Nils Dagsson Moskopp wrote:
> "Tab Atkins Jr." <jackalmage at gmail.com> schrieb am Mon, 30 Nov 2009 
> 12:50:42 -0600:
> 
> > Note: I would style it with "figure > [caption]" instead, to ensure 
> > you don't accidentally grab misplaced captions.
> 
> I would like to style captions on top differently from captions 
> underneath. What now ?

Where the caption goes is a styling issue, so I don't think that's a 
problem really. Just style it when you position it.

If you mean you want to apply meaning to where the element is in the DOM, 
then as Tab says, you can use selectors:

On Mon, 30 Nov 2009, Tab Atkins Jr. wrote:
> 
> figure > [caption]:first-child
> or
> figure > [caption]:last-child


On Mon, 30 Nov 2009, Nikita Popov wrote:
> 
> But still, why do we need the figure-wrapper? It would be cleaner 
> syntax, in my eyes, if you could easily specify an element that is 
> related as a caption to another element. Could look like this:
>
> <img src="bunny.jpg" alt="A Bunny" id="bunny">
> <p caption="bunny">The Cutest Animal</p>
> or
> <img src="bunny.jpg" alt="A Bunny" id="bunny">
> <p for="bunny">The Cutest Animal</p>

This leads to very confusing markup. Just as we found <h1><p><h2><p> to be 
confusing and are moving towards <section><h1><p><section><h2><p> 
</section></section>, I think we should avoid using inter-element 
references where possible.


> Or used in the code-context:
> <code id="mygreatscript">echo 0;</code>
> <strong for="mygreatscript>Does nothing, but it's still cool!</strong>
> 
> I know, I know, "for" is used for labelled form elements, but I think, that is
> expresses very well the relation between content and caption. Furthermore, any
> related content could be marked up this way.

I think it is _theoretically_ sound, but it is very hard to use in 
practice.


> For example, there is this strange hgoup-tag, that's used fore grouping 
> title and subtitle:
>
> <hgroup>
>    <h1>Somethind great happened</h1>
>    <h2>Now some subtitle in a newspaper article...</h2>
> </hgroup>
>
> If I wanted to place an image between title and subtitle of the article, it
> would look something like this:
>
> <hgroup>
>    <h1>Somethind great happened</h1>
>    <figure>
>        <dd><img src="Aphotoofit" /></dd>
>        <dt>Descr. of img.</dt>
>    </figure>
>    <h2>Now some subtitle in a newspaper article...</h2>
> </hgroup>

Can you show an example of a page that tries to do this today?


> Here styling is the problem: The fors are all identical and can't be 
> distinguished. So maybe get the caption-attr. back in?
>
> <h1 id="something-great-happened">Something great happened</h1>
> <img src="Aphotoofit" id="theimg" />
> <p caption for="theimg">Descr. of img.</p>
> <h2 subtitle for="something-great-happened">Now some subtitle in a newspaper
> article...</h2>

I have to admit to not being a fan of this style.


> Which would be not so nice looking in XML ('caption="caption"'). So 
> maybe combine them (which would, too, solve the problem of usage of 
> "for"
>
> for forms. [Nice three fors...]]):
> <h1 id="something-great-happened">Something great happened</h1>
> <img src="Aphotoofit" id="theimg" />
> <p caption-for="theimg">Descr. of img.</p>
> <h2 subtitle-for="something-great-happened">Now some subtitle in a newspaper
> article...</h2>

I don't think people would use this.


On Mon, 30 Nov 2009, Tab Atkins Jr. wrote:
> 
> People will very commonly use a wrapper in any case, for styling the 
> figure+caption together.  For example, putting a border and background 
> on it and positioning it.
> 
> As well, using a wrapping element to implicitly scope things is easier 
> than explicitly using indirection like @for.  I always prefer to do 
> <label>text <input></label> instead of <label for=foo>text</label><input 
> id=foo>, for example, because it's just plain easier to maintain.

Indeed.


On Tue, 1 Dec 2009, Kit Grose wrote:
> 
> I agree with the inclusion of a wrapper in that in the standard use-case 
> the entire figure is likely to be floated in a document; I can't think 
> of any situation where captions would be in a different container than 
> the element it refers to.
> 
> Is there a semantic reason for <p caption> rather than simply 
> repurposing the <caption> element itself? It seems to me that captions 
> in this context are conceptually identical to captions for tables?
> 
> I would imagine all of these to be legal (with both figure and caption 
> being explicitly block-level elements):
> 
> <figure>
> 	<img />
> 	<caption>Foo</caption>
> </figure>

On Mon, 30 Nov 2009, Tab Atkins Jr. wrote:
> 
> Not a semantic reason, just a practical one.  All existing browsers do 
> something completely wrong when they encounter <caption> outside of a 
> <table>.  It's at least as bad as their handling of <legend> outside 
> <fieldset>.
> 
> Otherwise, yes, <caption> would definitely be the ideal.

Indeed. (Same with <legend>, to a lesser extent.)


On Tue, 1 Dec 2009, Kornel LesiÅ~Dski wrote:
> 
> It's not bad I think. I've played a little with the live DOM viewer and 
> this seems usable:
> 
> <figure>
>  content
>  <caption><div class=caption>foo</div></caption>
> </figure>
> 
> caption start/end tag is completely ignored, so at lest there's no 
> negative side effect. You only need another styling hook. It's not any 
> worse than suggested hack for <dd>.

The problem is you can't then put a figure in a table sanely, because of 
the table parsing rules.


On Tue, 1 Dec 2009, Hugh Guiney wrote:
>
> Is there a reason we can't reuse <legend> (or <label>)? I don't think 
> giving <p> an attribute that it can only use inside of <figure> is very 
> straightforward.

I'd like to use <legend>, but it has back-compat issues. <label> would 
prevent these captions from having multiple form controls in them, and 
would be rather dubious from a semantic point of view given the complex 
rules that apply to <label> already. I'd rather not overload something 
that complex.

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'