
Dan Cederholm proposed the idea of a figure microformat some time ago and I followed up with a post the microformats discuss list. I’ve continued thinking about it and after throwing down with Tantek over IM, realized that K2‘s presentational approach of using alignleft, alignright and center classnames on images just didn’t hold up over time and, as Tantek asserted, was worse than being semanticly neutral.
Therefore, I decided and have been using the following approach to laying out images in my blog posts:
.code { border: 1px solid #eee; list-style-type: decimal-leading-zero; padding: 5px; margin: 0; }
.code code { display: block; padding: 3px; margin-bottom: 0; }
.code li { background: #fff; border: 1px solid #ccc; margin: 0 0 2px 2.2em; }
a img {
border:0;
}
img.figure {
max-width:460px;
border:2px solid #f7f7f7;
}
img.figure-a {
margin-left:auto;
margin-right:auto;
display:block;
}
img.figure-b {
float:right;
border:0;
margin:0 0 6px 6px;
}
img.figure-c {
float:left;
border:0;
margin:0 6px 6px 0;
}
Thus, if you apply the figure class to an image on its own line, it can’t be larger than a setting of your choosing (i.e. to not overlap columns, at least in Firefox) and will have a nice border outlining it. Adding figure-a will center it on the line, figure-b will align it to the right and figure-c will align it to the left.
I chose these names after consulting with Tantek, reading Dan’s piece and thinking about the multiple uses these classes might have beyond images (i.e. for formatting tables or graphs). Figures are often cited in textbooks and newspapers and currently don’t conflict with any other microformat.
I’d like to see the next versions of Sandbox and K2 support this and deprecate the alignleft, alignright and center image classes in subsequent versions. I’d also like NetNewsWire, Bloglines and other feed readers to support these basic alignment styles. But until then, feel free to use this markup in your own projects and spread the pattern!