[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