[uf-discuss] Figure Examples

[Paul Wilkins]

Chris Messina wrote:

 >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.

This technique is wide open to abuse, because it is infinitely 
extensible. I don't want to have to deal with .figure-q that someone 
else has done, and try to figure out how the variations differ, yet the 
absolutes of left and right must be avoided.

It seems that that the .figure-b class has have nothing to do with the 
.figure class, even though their naming is very similar.

Imagine coming across someone elses custom design. How do you figure out 
which particular class name should be used for a particular situation?

I like to subscribe to the css naming principle of "Class names should 
describe their functionality, rather than their appearance."

We can look for inspiration from other fields that deal with figures and 
images, like newspapers for example.

- masthead, which appears once at the top of the page and often has a 
different appearance to the rest of the figures
- banner, which goes across the whole page
- cutout, where the background has been removed and doesn't require any 
bordering
- inset, set inside other content, typically a paragraph
- lead-in, which preceeds a paragraph
- logo
- promo, for promoting an item inside
- sidebar
- skybox
- stand-alone, as separate content between paragraphs
- teaser, giving just a taste of what's to come


 >Here is the associated CSS:
 >
 >img.figure {
 >max-width:460px;
 >border:2px solid #f7f7f7;
 >}


This is the default appearance for figures.

 >img.figure-a, img.figure-c {
 >margin-left:auto;
 >margin-right:auto;
 >display:block;
 >}
 >

The function of the figure-a and figure-c classes, as is being used 
here, is to let the image sit by itself, between other content.
A classname of "banner" or "stand-alone" describes this particular 
function without implying how you should handle it.

 >img.figure-b {
 >float:right;
 >border:0;
 >margin:0 0 6px 6px;
 >}
 >

The figure-b class appears to be one where the image is inset within 
other content, the classname "inset" would be perfect for this.

 >img.figure-d {
 >float:left;
 >border:0;
 >margin:0 6px 6px 0;
 >}
 >

The figure-d class does the same inset job, but to the other direction 
of figure-b. The naming of this could be one of a couple of choices: 
"lead-in" for when you want the figure to always be at the start of the 
content, or if it's to purposely allow you to alternate the positioning 
of the inset image from the standard one, we can take a leaf from how 
alternate table rows are handles, and call it "inset alt"

img {
max-width:460px;
border:2px solid #f7f7f7;
}
img.figure .stand-alone, img.figure .banner {
margin-left:auto;
margin-right:auto;
display:block;
}
img.figure .inset {
float:right;
border:0;
margin:0 0 6px 6px;
}
img.figure .inset .alt {
float:left;
border:0;
margin:0 6px 6px 0;
}

Now the code becomes understandable and instantly clear. The class names 
define the separate functions that the figures are to convey, without 
being presentational in their nature. The class names are in line with 
the principle of semantic naming of css classes.

"Class names should describe their functionality, rather than their 
appearance."

What issues would get in the way of a more functional naming of classes?


Compare before:

<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"
/>

And compare after:

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

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

-- 
Paul Wilkins