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
and Garrett.
So, in the interests of publishing and
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.
I described
this to microformats-new a few months ago: I
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 <figure>
element,
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
with the
way legacy browsers handle <caption>
—
basically, reusing <caption>
outside of <table>
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
from.
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 <preamble>
and <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
I’ve updated my approach to
figure markup.
class="figure-b"
and class="figure-c"
for when I’d like
figures floated to one side or the other.