[whatwg] Subject: Re: many messages regarding image captions

[Michel Fortin]

Le 28 nov. 2006 à 9:34, David Walbert a écrit :

> In principle, I see your point, but I don't see that such broadly  
> defined figures would have widespread practical value. A "figure"  
> in print publishing traditionally referred to anything that  
> couldn't be normally typeset, but in practice that usually referred  
> to images, charts/graphs ( which in HTML would be inserted as  
> images also), and tables (which in HTML have their own structure  
> and markup). A "figure" in HTML seems to me to serve the same  
> purpose: to denote and describe illustrative content that cannot  
> itself be marked up with HTML.

Then we conceive things differently. A figure in my mind is not  
something that can't be expressed in HTML. To embed non-HTML content,  
<embed>, <img>, <object>, and other inline XML languages are used; no  
need for a figure for that. A figure to me is something that provides  
support or illustration to the surrounding text.


> The example from mozilla.org doesn't require any special container  
> element, because it needs no caption. The set-aside text is an  
> example of what's being discussed in the surrounding text, and the  
> heading "example" serves perfectly well to explain that.

But remove the stylesheet and you can see the CSS-generated "Example"  
"heading" disappear. Now, how do you distinguish what is the main  
text and what is not?

I believe that <figure class="example"> would be a better choice than  
<div class="example"> as it show that the content of the example is  
not to be taken as part of the main text, but serves as an  
illustration of what the main text is talking about. Maybe a new  
<example> element would be better suited for this, but it seems to me  
that "example" and "figure" often overlap in meaning.

> Once we say that plain text can be a "figure," I'm not sure what  
> meaning "figure" really has any longer; it could be almost  
> anything. And if it could be almost any piece of text that the  
> author feels is an aside, it will have no semantic consistency, and  
> will then be functionally no different from <div>.

<figure>
     illustrative or supporting content for the main content.

<aside>
     tangential content which can be considered separate from
     the main content.

I think the difference is pretty clear.

  - - -


There is something interesting in the current proposal: it already  
allows arbitrary content inside it: fallback content. Someone could  
write:

     <figure>
       <legend>A nutritional information label on a box of cereal</ 
legend>
       <object data="nutritional-info.jpg">
         <table>
           <caption><strong>Nutrition Facts</strong> - Per 1/2 cup  
(125 ml)</caption>
           <thead><tr><th>Ammount</th><th>% Daily Value</th></tr></ 
thead>
           <tbody>... replication of the table shown in the  
picture ...</tbody>
         </table>
       </object>
     </figure>

This would show a picture of the nutritional information label on  
visual browsers; text readers and text-only browsers would still be  
able to give an adequate representation of the figure as a table  
captioned "Nutrition Facts - Per 1/2 cup (125 ml)".

For visual browsers with images disabled, it would be interesting if  
the fallback table could be styled such as that it resemble the  
picture. For instance, there is a standard way to lay out nutritional  
information tables in Canada; I could add a couple of style rules  
here and there on the fallback content to place borders and margins  
to match the standard layout.

And here lays the irony: if the idea was to display a sample  
nutritional information table with no other context element, the  
fallback content may give a better visual representation than the  
actual picture. Unless the image is vector-based or the table has  
needs really fancy styling, the styled table will certainly be of  
better quality than the image.

Here is a page which could benefit from such an approach:

<http://www.hc-sc.gc.ca/fn-an/label-etiquet/nutrition/interactive/ 
inl_main_e.html>

If you look closely at the bottom of that same page, you'll see this  
markup:

     <p><strong>Bran Cereal</strong></p>
     <hr>
     <p><strong>Ingredients:</strong> Whole wheat, wheat bran,
     sugar/glucose-fructose, salt, malt (corn flour, malted barley),
     vitamins (thiamine hydrochloride, pyridoxine hydrochloride,
     folic acid, d-calcium pantothenate), minerals (iron, zinc oxide).
     </p>
     <hr>

which is an illustration of a list of ingredients; completely done in  
HTML with some text inside a paragraph. A perfect use case for a  
paragraph as a figure:

     <figure>
       <legend>Brand Cereal</legend>
       <p><strong>Ingredients:</strong> Whole wheat, wheat bran,
        sugar/glucose-fructose, salt, malt (corn flour, malted barley),
        vitamins (thiamine hydrochloride, pyridoxine hydrochloride,
        folic acid, d-calcium pantothenate), minerals (iron, zinc  
oxide).
       </p>
     </figure>


Michel Fortin
michel.fortin at michelf.com
http://www.michelf.com/