Proposal for <figure> graceful degradation

1) I propose using <label> for the element that holds the caption of  
an image instead of <legend>. I believe this would allow for easier  
graceful degradation. They seem to be about equally semantically close  
to the word "caption". Current browsers handle <legend> that's outside  
a fieldset oddly:

- Firefox and Safari drop the element entirely from the DOM when it  
appears outside a <fieldset>.
- Opera puts the <legend> in the DOM as a void element, and inserts  
its contents afterwards.
- IE adds a void <legend> element and a void </legend> element before  
and after the text.

<label> doesn't have any of these problems.

The following styling (mostly done by Lachlan Hunt) gives pretty good  
default styling in Firefox, Safari and Opera. Getting any kind of  
decent result with <legend> requires nesting a <span> inside the  
<legend>, due to the above issues. It doesn't work in IE, because IE  
doesn't support CSS tables and because of its handling of unknown  
elements (cited elsewhere).

figure { display: table; }
figure label { display: table-caption; text-align: center; caption- 
side: bottom; }
figure label:first-child { caption-side: top; }

http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0Afigure%20%7B%20display%3A%20table%3B%20%7D%0Afigure%20label%20%7B%20display%3A%20table-caption%3B%20text-align%3A%20center%3B%20caption-side%3A%20bottom%3B%20%7D%0Afigure%20label%3Afirst-child%20%7B%20caption-side%3A%20top%3B%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Cfigure%3E%0A%3Cimg%20src%3Dimage%3E%0A%3Clabel%3ECaption%3C%2Flabel%3E%0A%3C%2Ffigure%3E%0A%0A


2) <details> has the same issue (though it's trickier to handle that  
one in pure CSS).


3) Lachlan Hunt points out two possible problems with using <label>:

     3.a) It may interfere with assistive technology to have labels  
that don't contain a form control and are not associated with a form  
control via "for". Neither of us was sure if this would be a real  
problem. If anyone could test this, it would be helpful.

     3.b) Authors may have existing styling for label for form control  
purposes that's not specifically scoped via classes, ids or descendant  
rules. In this case, they would have to undo it for figure labels. The  
same issue is possible in theory for <legend>, but the use of  
<fieldset> seems to be relatively rare as it does not fit well with  
modern visual/interaction design.

I think the problems with using <legend> are more serious than either  
of the above problems.


4) Another alternative would be using a new unknown element. Whipping  
out my thesaurus, I see <rubric>, <inscription>. Another possibility  
is something like <figcaption> (to avoid the problems <caption> would  
cause for figures inside tables), but that wouldn't be a good fit for  
<details>.

This would solve the problems in Safari, Opera and Firefox. But it  
would not help in IE (which seems like it would require script-based  
assistance in any case).


Regards,
Maciej

Received on Sunday, 16 September 2007 08:28:23 UTC