Marking up figures
Back in February, Garrett
Dimon blew me away with his
site redesign. Inspired by the look of captioned figures in
this article, I went about redoing how I mark up and style
such figures here.
Since then, POSH has become the
new hot thing, and several others have recently written about
their figure markup, notably Chris
So, in the interests of
discussing my own POSH patterns, I thought I’d start
with documenting how I mark up figures and why.
I think it’s important to reuse
names etc. from pre-existing standards, so I set out to do
so in this case.
Actually, there’s a sense in which I’m also doing
this backwards — I’m looking to future standards,
most notably HTML5.
this to microformats-new a few months ago:
write up the idiomatic HTML5 for something, then convert new
elements into some kind of backwards-compatible analogue, e.g.
menu → ol.menu, figure → div.figure, etc.
HTML5 introduces a
which looks like so:
<figure> <legend>Caption goes here</legend> <img src="/path/to/img.png" alt="blah blah blah" /> </figure>
You might be wondering why HTML5 uses
<legend> here instead of
<caption>. It has to do
way legacy browsers handle
<caption> outside of
would break the web.
Here’s a first cut at recasting this into some kind of forward-looking HTML4:
<div class="figure"> <p class="caption">Caption goes here</p> <img src="/path/to/img.png" alt="blah blah blah" /> </div>
This has block-level elements with inline-level siblings, which is gross, so let’s ensure they’re all block level:
<div class="figure"> <p class="caption">Caption goes here</p> <p><img src="/path/to/img.png" alt="blah blah blah" /></p> </div>
This is looking pretty good.
Another source of prior art and/or inspiration is RFC 2629, which defines an XML language used for writing RFCs (many of which contain captioned ASCII diagrams). Here’s how RFC 2629 treats figures:
<figure> <preamble>blah blah blah</preamble> <artwork> ASCII art goes here </artwork> <postamble>blah blah blah</postamble> </figure>
POSH note: this is where my use of
<pre class="artwork"> for ASCII art comes
For instance, this depiction of
the microformats process uses such markup.
I already had lots of content where I had text associated with
an image both above it and below it, so RFC 2629’s
<postamble> seemed a nice
fit. Adding it all up, here’s what we get:
<div class="figure"> <p class="caption preamble">Caption goes here</p> <p><img src="/path/to/img.png" alt="blah blah blah" /></p> <p class="postamble">blah blah blah</p> </div>
As far as positioning
goes, I’ve adopted Chris’s
class="figure-c" for when I’d like
figures floated to one side or the other.