Figure markup redux

by Edward O’Connor on 29 August 2007

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 Chrisfigure 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&#8217;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&#8217;s on the left, Reed&#8217;s in the middle, and
           I&#8217;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.

Comments

  1. Hey Edward, when I saw Paul Wilkins' recommendation, I was pleasantly surprised that someone had developed an improvement that crossed the lines between being purely presentational and being somewhat semantic. I really like his approach and that it borrows from very old conventions.

    I meant to write it up at the time, but you know how it is. In any case, really glad that you wrote it up and I think it'd something I'd be happy to adopt and improve from this point forward.

    Chris Messina, 30 August 2007

  2. Oi! Ed! This is a great write up and nearly the same as what I have been implementing lately on a couple projects.

    One question: did you wrap the image in a paragraph because of the anchor? I mean, I often do the same, its just that when I was staring at your code I began to wonder if that is necessary since the whole thing is wrapped in the figure div and all...

    Your thoughts?

    Joshua Brewer, 30 August 2007

  3. Joshua, in the initial post he wrote that it's because of the structure of block and inline elements. What I don't get, and I admit I initially ran with your explanation, is that, well, the img inside the div is perfectly valid? What made you think that it's gross? I know there could be whitespace issues, but that's presentational? Anyway, aside from that, I'm kinda with you.

    Matthias Willerich, 26 October 2007

  4. oh is it because of this: http://annevankesteren.nl/2005/05/content-models

    if so, that's very honorable and high brow. I guess I learned something today.

    Matthias Willerich, 26 October 2007

Add a comment

Posting...