[whatwg] All (new) sorts of figures

Michel Fortin michel.fortin at michelf.com
Mon Jul 16 18:18:39 PDT 2007


Since I'm not convinced that the current content model for <figure>  
is adequate [1], I decided to dig more examples where figures in HTML  
pages would be hard to fit with the current model. Here are the results.

My previous in-depth list of use cases for figures [2] was mostly  
concentrating on examples I could find by searching for "Figure  
1" (and other numbers too), and by looking at news site for image  
captions. This one is less methodic: in the last few weeks when I  
found something for which I feel the figure markup should apply to  
(because other alternatives aren't as good) but couldn't due to  
current content-model restrictions, I noted it and tried to find  
similar examples with various searches for documents of the same kind.

  [1]: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2006- 
November/008015.html
  [2]: http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2006-June/ 
006828.html


Figures with textual content
----------------------------

Many labeled code from Apple documentation (search for "Listing" in  
the pages)
<http://developer.apple.com/documentation/Cocoa/Conceptual/ 
Multithreading/articles/CarbonDetaching.html#//apple_ref/doc/uid/ 
TP40001477>
<http://developer.apple.com/documentation/Cocoa/Conceptual/Exceptions/ 
index.html#//apple_ref/doc/uid/10000012i>
<http://developer.apple.com/documentation/Cocoa/Conceptual/Exceptions/ 
index.html#//apple_ref/doc/uid/10000012i>
<http://developer.apple.com/documentation/AppleScript/Conceptual/ 
AppleEvents/index.html>


Many labeled code from MSDN (search for "Listing" in the pages)
<http://msdn2.microsoft.com/fr-fr/office/bb409623.aspx>
<http://msdn2.microsoft.com/en-us/library/aa907678.aspx>
<http://msdn2.microsoft.com/en-us/library/aa175794(sql.80).aspx>
<http://msdn2.microsoft.com/en-us/library/aa203722(office.11).aspx>
<http://msdn2.microsoft.com/en-us/library/aa175779(sql.80).aspx>


Many labeled code samples (most labeled as a "Listing")
<http://www.script-masters.com/home/tutorial_php_mysql- 
php_guestbook.html>
<http://www.onlamp.com/pub/a/onlamp/2007/06/28/the-power-of-google- 
gears-part-1.html>


Figure 4.1
<http://pentangle.net/python/handbook/ 
node39.html#Additional:Arrays:Alignment>
This is a code sample


Table 4.1(i)
<http://www.cc.gatech.edu/~lindstro/papers/vis2001a/supplemental/>
This one is called a table (and is laid out in a table), but I'm a  
little puzzled as to why it wasn't called a figure. It's pseudo-code.


Figure 4.1
<http://www.cs.ualberta.ca/~jonathan/Grad/pena/node31.html>
This one is an image of some C code. While it's presented as an  
image, it'd be much better (more accessible and easier to style) if  
it was in textual form.


Many figures on that page simply contain styled text as images.
<http://www.theses.ulaval.ca/2005/22822/ch03.html>


Figure of a Textual Terminal Display (the whole document is the figure)
<http://www.chass.utoronto.ca/epc/chwp/auger/fig12.htm>


Figure 1a & 3a
<http://www.ubu.com/papers/ol/hennessy01.html>
Generated poems.


Figure 2
<http://alsic.u-strasbg.fr/Num5/bourdet/alsic_n05-rec1.htm>


Many figure about formatting plain text documents
<http://www.ietf.org/IESG/content/ions/drafts/ion-agenda-and- 
minutes.html>


Many CSS code sample figures.
<http://blogs.codes-sources.com/cdubois/archive/2006/11/15/toute-la- 
lumi-egrave-re-sur-les-propri-eacute-t-eacute-s-margin-et-padding- 
dans-les-r-egrave-gles-d-affichage-des-feuilles-de-style.aspx>


Figures 1, 4, and 5
<http://www.finchpark.com/arts/poems/index.htm>


Listing 1 to 4
<http://sqlserver.itpro.fr/Dossiers-par-Theme/2006/12/12/090131586- 
Pilote-automatique.htm>


I suggest for these cases that we allow <pre> as a child of figure,  
as in:

     <figure>
       <pre><code>while (1) continue;</code></pre>
       <legend>Silly code</legend>
     </figure>

<pre> could be limiting in some of these cases though. For instance,  
some pseudo-code examples and illustrations of generated poems in  
those cases above aren't formatted with <pre>. Here is another kind  
of figure that wouldn't work with <pre>:

Figure 1, 2, 3, and 4 are dictionary entries.
<http://archives.univ-lyon2.fr/67/01/bejoint_03.htm>



Multi-Image Examples
--------------------

These examples feature figures containing many subfigures in separate  
images (often labeled a, b, c...). I have not included figures with  
multiple subfigures contained in one image file because these can  
already be expressed within the limitations of the current figure  
syntax.


Figure 4.4 and 4.1
<http://www.bfoit.org/Intro_to_Programming/TT_Iteration.html>


Figure 2
<http://www.caren.univ-rennes1.fr/ORE-AgrHys/sites/Kerbernez/ 
AgrHys_Kerb_fig.htm>


Figure 16, 19, 20, 21, 22, 23, 24, 28, and 29
<http://imagerie-cv.univ-lyon1.fr/WEB_CARDIO/documents/ 
Documents_references/coronaires/expl-anat/Expl-a07.htm>


Figure 28
<http://www.esiee.fr/~info/a2si/rapport1999-2003/node59.html>


Figure 14
<http://www.enpc.fr/lami/thematiques/idematestruc.htm>


Figure 12, 13, and 14
<http://www.enpc.fr/lami/thematiques/idematestruc.htm>


Figure 8, 9, 10, and 11
<http://www.imarpe.gob.pe/imarpe/enfentecnico_febrero_2004_02.php>


Figure 5
<http://tollefsen.wustl.edu/projects/coagulation/coagulation.html>


Figure 2 and 3
<http://www.staff.hum.ku.dk/hp/apercu/apercu6_00.htm>


Figure 3
<http://www.exchanges.state.gov/education/engteaching/pubs/BR/ 
functionalsec1.htm>


Figure 13
<http://sofia.usgs.gov/publications/papers/new_tert_strat/ 
char_arcadia.html>


Figure 5, 6, and 7
<http://www.ummo-sciences.org/activ/art/art2.htm>


Figure 5
<http://www.revue-texto.net/Inedits/Brunet/Brunet_Distance.html>


Figure 3 and 4
<http://www.artsweb.uwaterloo.ca/~kholmber/350B/generalintro.shtml>


Figure 6, 17, and 18
<http://www.cavi.univ-paris3.fr/lexicometrica/article/numero2/ 
brunet2000.html>


I suggest for these examples that the figure element should permitted  
to enclose more than one image. For instance:

     <figure>
       <img ...>
       <img ...>
       <legend>My house seen from the front and from the back</legend>
     </figure>

It could also be useful to allow labeling of subfigures, perhaps like  
this:

     <figure>
       <figure><legend>(a)</legend> <img ...></figure>
       <figure><legend>(b)</legend> <img ...></figure>
       <legend>My house seen (a) from the front; (b) from the back</ 
legend>
     </figure>


A few other cases
-----------------

The "Browser Rendering" figure on that page contains the browser  
rendering of elements done by placing the actual markup in the  
figure. Note: actually, it use a table to place the rendering, but  
the table seems to have been used mostly to show things in two  
distinct columns.
<http://xilize.sourceforge.net/Reference/examples/examples.html>

Browser rendering examples in these pages cover a lot of cases for  
HTML markup. Allowing any block-level content in figures is probably  
the only way to make the figure markup usable for this case.

Here are other similar cases:
<http://developer.compete.com/public/Mashery/help/markdown.php>
<http://www.i18nguy.com/markup/right-to-left.html>

This page contains an example of a layout table as a figure:
<http://www.uwo.ca/IP/barrierfree/training/badsite.html>

In the above, the figure caption is attached to the table itself, but  
since the whole table is the illustration I think it'd be better to  
have a figure element contain the table, like this:

     <figure>
       <table>...</table>
       <legend>An example of a layout table and image map with no alt  
tags</legend>
     </figure>

Also of interest is what looks like a textual figure just below  
(actually within an <h5> within the table caption; silly FrontPage).  
A paragraph within a figure would seem good markup to accomodate this:

     <figure>
       <p>"Каталог Российских Веб- 
Серверов"</p>
       <legend>An example of foreign text that should be labeled  
better</legend>
     </figure>



Caption-less figures
--------------------

While perhaps not all these examples are necessarily "figures"  
strictly-speaking, example rendering of HTML inserted inline in a  
document needs to be differentiated from the main text while reading.  
Here are two links, the first one use <blockquote>, the last one use  
<div class="html">:
<http://docutils.sourceforge.net/docs/user/rst/quickstart.html>
<http://www.quirksmode.org/css/box.html>
<http://realworldstyle.com/hang_punct.html>
<http://www.brainjar.com/css/positioning/>
<http://www.mezzoblue.com/downloads/markupguide/>
<http://rpc.textpattern.com/help/?item=header>
<http://www.michelf.com/projects/php-markdown/concepts/>

The link above contains sample rendering of some HTML content. Here  
are some other similar examples of caption-less HTML content as a  
figure.

Ribbons as colored HTML text.
<http://ausweb.scu.edu.au/aw95/hypertext/gleeson/form-markup- 
examples.html>

Sample paragraphs in italic.
<http://www.associatedcontent.com/article/40751/ 
painful_prose_how_to_edit_your_paragraphs.html>

"Sample paragraphs" section at this end.
<http://www.ssdd.uce.ac.uk/learner/writingguides/1.30.htm>

"Will you?" poem at the end of the page.
<http://www.poetry4kids.com/modules.php? 
name=Content&pa=showpage&pid=2&page=4>

There is nothing in HTML allowing the illustrative content to be  
separated from the main content when it is made of HTML markup  
itself. Using <blockquote> or <div class="html"> is not a very good  
as it relies on the visual rendering of these elements to be understood.

A solution for that could be to allow caption-less figures with block- 
level HTML content, as in:

     <p>Here is the result:</p>

     <figure>
       <p>This is a sample paragraph.</p>
       <p>Followed by another paragraph.</p>
     </figure>



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





More information about the whatwg mailing list