[uf-discuss] Figure Examples

[Chris Messina]

Hi all,

I've begun collecting examples of figure markup in the wild:

http://microformats.org/wiki/figure-examples

I'm bringing up an old topic that actually stirred up some controversy
between me and Tantek with regard to using presentational class names
in HTML documents. I've since invented my own design pattern for
marking up figures on my blog, but wanted to document other behaviors
in the wild, even if they violate the hallowed separation of content
and presentation.

Specifically, there are many themes that I've discovered that use some
variant of "float-right", "float-left", "alignright", "alignleft" and
so on to mark up images in blog posts. While this is a useable
convention for themers and designers, it is not semantic.

Therefore, as I mentioned, I have developed my own practice that uses
the order of class attribute values to define the alignment of
figures. Thus, the classes that I use are:

.figure, .figure-a, .figure-b, .figure-c, .figure-d

This is infinitely extensible and, as Tantek has said, not
"semantically negative" -- as in, it is better to be semantically
neutral than to introduce presentational classnames.

Here is the associated CSS:

img.figure {
max-width:460px;
border:2px solid #f7f7f7;
}
img.figure-a, img.figure-c {
margin-left:auto;
margin-right:auto;
display:block;
}
img.figure-b {
float:right;
border:0;
margin:0 0 6px 6px;
}
img.figure-d {
float:left;
border:0;
margin:0 6px 6px 0;
}

As you can see, I've associated -b and -d with right and left
alignment respectively, going clockwise with -a, -b, -c, -d, just like
attributes go top, right, bottom, and left.

In practice, I mark up figures like this:

<img src="http://farm2.static.flickr.com/1331/1093837483_4fe0712799.jpg"
width="500" height="344" alt="NewsFire Software Updates" class="figure
figure-a" />

<img src="http://farm2.static.flickr.com/1209/1058437312_8cc542a2a2_o.png"
width="122" height="346" class="figure figure-b" alt="iPhone Template"
/>

This provides me with the presentational hooks that I need while also
staying semantically neutral.

These classes can apply to tables, containing DIVs and other elements.

Please let me know what you think -- and if you have any suggestions.

Chris

-- 
Chris Messina
Citizen Provocateur &
  Open Source Advocate-at-Large
Work: http://citizenagency.com
Blog: http://factoryjoe.com/blog
Cell: 412 225-1051
Skype: factoryjoe
This email is:   [X] bloggable    [ ] ask first   [ ] private