Figure markup redux
In April, I wrote up my technique for marking up figures. My method has evolved since then, so here I describe the current state of things.
In Chris’ figure
markup proposal, he uses (and I adopted) the
semantically-neutral labels figure-a
,
figure-b
, &c., to tag figures for different
presentations.
Paul Wilkins’ wrote an
excellent commentary on this technique, in which he proposes
to borrow terminology from the publishing industry to describe
each of these sorts of figures. I’ve adopted several of
his terms for use in my own figure markup, replacing
figure-b
with inset
and so on.
In addition, I use alternate
to
change the way things are floated, much like Garrett Dimon in
“Coding
for Content.” What Garrett calls clean
,
Paul calls cutout
;
I’ve adopted the latter term.
I’ve written up XMDP for my figure markup—feel free to use it if you like.
As examples, here’s the markup for the two figures appearing in “A day at the races:”
<div class="figure stand-alone">
<p>
<a href="http://flickr.com/photos/37699593@N00/1250927685/"><img
src="http://farm2.static.flickr.com/1117/1250927685_c6d1a3126f.jpg"
alt="My $70 horse" /></a>
</p>
<p class="caption postamble">
Jay’s shot of Chief Teddybear winning <a
href="http://www.dmtc.com/racinginfo/results/summary/070825.html"
>race 3</a>.
</p>
</div>
Had I omitted stand-alone
from @class
, the figure would be
full-width, like in “Bold Thady Quill.”
<div class="figure inset">
<p>
<a href="http://flickr.com/photos/kirinqueen/1254560550/"><img
src="http://farm2.static.flickr.com/1438/1254560550_887bb2c5d2_m.jpg"
title="Jay’s on the left, Reed’s in the middle, and
I’m on the right"
alt="Jay, Reed, and me, at the racetrack" /></a>
</p>
<p class="caption postamble">
Enjoying the day with Jay and Reed
</p>
</div>
I float inset
figures right by default; had I included the alternate
class, this figure would have floated left instead.