figure-examples

Revision as of 18:21, 13 August 2007 by EdwardOConnor (Talk | contribs)
(diff) ←Older revision | Current revision (diff) | Newer revision→ (diff)

Jump to: navigation, search

Contents

Figure examples

This page documents examples of mark up for figures like images, captions and data tables in webpages and the class-names that they've used - Chris Messina

The Problem

There is no HTML tags for identifying or marking up supporting content like illustrative images (as in encyclopaedic references), photographs and their captions, credits or licenses (as in news articles) or data tables. Typically this content can be found in close proximity to the relevant information, but oftentimes mixed with other elements.

The goal of this effort is to document and reflect the real-world needs of such design patterns while paying close attention to the types of data that people are using in this supportive role and also paying close attention to the existing class names and presentational styles that go along with such formats.

Participants

Real-World Examples

These are examples and implementations in the wild of various efforts at marking up figures in web pages, blog posts and articles.

CNET

CNET uses cnet-image-div, float-left, cnet-image, image-credit and image-caption to mark up supporting photographs and artwork.

See this example: Why I recommend the iPhone -- and don't.

HTML5

HTML5 introduces a new tag called "figure", which represents a block-level image, along with a caption:

<figure id="fig2">
  <legend>Figure 2. Install Mozilla XForms dialog</legend>
  <img alt="A Web site is requesting permission to install the following item: 
    Mozilla XForms 0.7 Unsigned" 
    src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>

This is slightly different from the broader goal of this effort, but nevertheless points to current work on this topic.

Existing Practices

In many cases, classes that are used exclusively for alignment and positioning are documented herein order to have an accurate sense for how people mark up this kind of content in practice.

FactoryCity Blog

K2 WordPress Theme

.center {
	text-align: center;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left
	}

img.center, img[align="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright, img[align="right"] {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft, img[align="left"] {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
	
img.noborder {
	border: none !important;
	}

Habari K2 Theme

Similar to K2, the Habari K2 instance supports the following classes:

.center {
	text-align: center;
	}

.alignright {
	float: right;
	}
	
.alignleft {
	float: left
	}

img.center, img[align="center"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
	
img.alignright, img[align="right"] {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft, img[align="left"] {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}
	
img.noborder {
	border: none !important;
	}

ColdBlue WordPress Theme

Further discussion

A few blog posts capture the essence of this discussion well:

figure-examples was last modified: Wednesday, December 31st, 1969

Views