Microformats Wiki - User contributions [en]

figure

2009-02-15T22:08:24Z

MatthiasWillerich: /* Inspiration and Acknowledgments */ updated broken link to HTML 5 draft section figure

<entry-title>figure 0.3</entry-title>
{{Template:DraftSpecification}}

{{TOC-right}}

== Specification ==

'''This is a DRAFT specification.'''

<div class="vcard">
; <span class="role">Editor</span>
: <span class="fn">[[User:TobyInk|Toby Inkster]]</span> (<span class="url">http://tobyinkster.co.uk/</span>)
</div>
; Authors
: Toby Inkster (affiliations above)
: <div class="vcard"><span class="fn">[[User:Csarven|Sarven Capadisli]]</span> (<span class="url">http://www.csarven.ca</span>)</div>

; Acknowledgements: See [[figure#Inspiration_and_Acknowledgements|acknowledgements]].

[[figure#Copyright|Copyright]] and [[figure#Patents|patents]] statements apply.

== Introduction ==

Many HTML documents include supporting images, such as photographs, flow charts, graphs, blueprints or screen captures. These are usually incorporated using the HTML <img> element, however this offers no way of differentiating between such supplementary content and mere decorative images.

Authors often wish to annotate these images with captions or attributions. Currently there is no markup to explicitly associate such text with an image and readers must rely on the proximity of the image and text on the finished rendered page. This specification aims to allow authors to mark up captions and credits, explicitly associating them with an image.

This specification ''is not'' intended as a method for marking up ''all'' images on web pages — the HTML <code><nowiki><img/></nowiki></code> element is adequate for decorative and many other images. This specification is intended to be used for images that add or clarify information to the article's text.

{{rfc-2119-intro}}

== Format ==

=== Properties ===

<div style="float:right;width:50%;font-size:85%;margin:0 0 1em 1em">
====Key====
Based on Perl's [http://www.perl.com/doc/manual/html/pod/perlre.html standard quantifiers]:
{| border="1" cellpadding="2"
| '''bold''' {1} || {{must}} be present exactly once
|-
| ''italic''<nowiki>*</nowiki> || {{optional}}, and {{may}} occur more than once
|-
| + || {{must}} be present, and {{may}} occur more than once
|-
| ? || {{optional}}, but {{must-not}} occur more than once
|-
| [square brackets] || list of common values
|-
| (parentheses) || data format
|-
| # || comment
|-
| ! || awaiting documentation
|}
</div>

* '''figure''' {1}
** '''image''' {1}
** '''legend''' +
** ''credit'' (text | [[hcard|hCard]])*
** ''subject'' (text | [[hcard|hCard]] | [[geo]] | [[adr]] | [[hcalendar|hcalendar event]])*

Additionally, an figure {{may}} contain zero or more links marked up with [[rel-tag]].

Please note that the "legend" element should contain what would normally be called a "[http://en.wiktionary.org/wiki/Caption caption]". The term "legend" is used in this specification instead of "caption" in order to maintain parity with the element names used in HTML5. (In turn HTML 5 uses <legend> instead of <caption> to avoid triggering table layouts in legacy browsers.)

The subject, credit and tags may be children of the legend, in which case the text within them forms part of the legend as well as part of the child elements.

====Embedded Microformats====

If an element with class "credit" also has class "vcard" then the element {{should}} be considered to be the [[hcard]] for a credited person or organisation. Otherwise it {{must}} be considered as a plain text credit.

If an element with class "subject" also has a class "vcard" then the element {{should}} be considered to be the [[hcard]] for the subject of the image - for example the person depicted by a photograph or sketch. If an element with class "subject" also has a class "adr" or "geo" then the element should be considered to be the [[adr|address]] or [[geo|geographic location]] of the subject of the picture - for example the location of a landscape in a photo or the address of a the building shown in blueprints. If an element with class "subject" also has a class "vevent" then the element should be considered to be the [[hcalendar|vevent]] for the subject of a figure - for example a photograph of a sporting event, or a diagram of a military operation.

====Design Patterns Used====

The [[include-pattern|include pattern]] {{may}} be used within figures.

As the figure microformat does not specify any properties that are not human-readable, the [[abbr-design-pattern|abbr design pattern]] {{should-not}} be used directly within a figure, though it {{may}} be used within children formatted in accordance to another microformat - e.g. as [[hcalendar|vevents]] often use the abbr design pattern to specify their start time, a figure subject formatted as a vevent {{may}} use the abbr design pattern in accordance with the [[hcalendar]] specification.

=== Minimisation ===

To simplify markup, a number of shortcuts are explicitly allowed by this specification.

# When no "image" class is found within the figure, the first <img> element {{must}} be taken to be the image.
# The longdesc attribute {{may}} be used to point to a legend elsewhere on the page in a manner similar to the [[include-pattern|include pattern]]. As with the inclusion, parsers should ignore the pattern if the fragment linked to is an off-page resource.
# If the "legend" class is found on the same element as the "image" class (or the image inferred by the previous rule), then the title attribute {{must}} be used as the legend.
#* Rationale: some people have questioned the use of the title attribute rather than the alt attribute. The purpose of the figure's legend is to display explanatory text alongside the image. The purpose of the alt attribute is "to serve as content when the element cannot be rendered normally" [http://www.w3.org/TR/REC-html40/struct/objects.html#adef-alt] — i.e. when the image cannot be displayed. Thus the alt and legend fulfil different purposes. Authors are encouraged to consider accessibility carefully when building their page, and supply appropriate alt text in addition to the image's legend.
# If no legend can be found using the legend class or longdesc attribute, then the alt attribute {{must}} be used in its place.
# The "image" and/or "legend" classes may be attached to the same element as the element with the "figure" class.

=== XHTML Meta Data Profile ===

Authors using the figure microformat {{should}} add a profile link to the XMDP profile. The preferred URL is <tt><nowiki>http://purl.org/uF/figure/draft</nowiki></tt>. For more information on how to link to the profile, see [[profile-uris|Profile URIs]].

<dl class="profile">
<dt id="class">class
<dd>[http://www.w3.org/TR/REC-html40/struct/global.html#adef-class HTML 4 definition of "class".] This profile defines the following class names:
<dl>
<dt id="figure">figure
<dd>A section containing a graphical element which provides information relevant to the document. A figure will include one image and at least one legend. The legend may be implied from the image's <code>longdesc</code> attribute.
<dt id="image">image
<dd>The primary graphical element contained within a section with <code>class="figure"</code>.
<dt id="legend">legend
<dd>A description or explanation for a graphic, intended to be displayed alongside it.
<dt id="subject">subject
<dd>A person, place, event or other thing or concept depicted by a graphic.
<dt id="credit">credit
<dd>A person, organisation or other agent that created, contributed to or supplied a graphic.
</dl>
</dl>

== Examples ==

<pre>
<div class="figure">
<img class="image" src="photo.jpeg" alt="">
<p class="legend">
<a rel="tag" href="http://en.wikipedia.org/wiki/Photography">Photo</a>
of <span class="subject">Albert Einstein</span> by
<span class="vcard credit">
<span class="fn">Paul Ehrenfest</span>
(<span class="role">photographer</span>)
</span>
</p>
</div>
</pre>

Parsed as:

* '''Image''': photo.jpeg
* '''Legend''': Photo of Albert Einstein by Paul Ehrenfest (photographer)
* '''Credit''': Paul Ehrenfest (hCard)
* '''Subject''': Albert Einstein
* '''Categories''': Photography

<pre>
<p class="figure">
<label style="display:block" class="legend">January sales data</label>
<img class="image" src="salesdata.png"
alt="Widget sales have fallen slightly, but widget repair kits have sold well.">
</p>
</pre>

Parsed as:

* '''Image''': salesdata.png
* '''Legend''': January sales data

=== Examples Using Minimisation ===

The following examples {{must}} all be considered equivalent:

<pre>

<div class="figure">
<img class="image" src="foo.jpeg" alt="">
<span class="legend">Foo</span>
</div>
</pre>

<pre>

<div class="figure">
<img src="foo.jpeg" alt="">
<span class="legend">Foo</span>
</div>
</pre>

<pre>


<div class="figure">
<img class="legend" src="foo.jpeg" alt="" title="Foo">
</div>
</pre>

<pre>



<img class="figure legend" src="foo.jpeg" alt="" title="Foo">
</pre>

<pre><nowiki>
<div class="figure">
<img class="image" src="foo.jpeg" longdesc="#the-legend" alt="" />
</div>

<p class="legend" id="the-legend">Foo</p></nowiki></pre>

== HTML 5 Considerations ==

When used in [http://www.w3.org/html/wg/html5/ HTML 5], any <figure> element has an implied class "figure"; any <legend> element has an implied class "legend". For example, the following HTML 5:

<pre>
<figure>
<img src="foo.jpeg" alt="">
<legend>Foo</legend>
</figure>
</pre>

is interpreted as if it were:

<pre>
<figure class="figure">
<img src="foo.jpeg" alt="">
<legend class="legend">Foo</legend>
</figure>
</pre>

== Inspiration and Acknowledgments ==

This microformat is largely intended to be a simple [http://en.wikipedia.org/wiki/Porting "port"] of HTML 5's <code><figure></code> construct to other versions of HTML and XHTML.

The three required properties (figure, image and caption) are derived from that. The additional properties (credit, subject) are included because this information seems to be commonly supplied in figures "in the wild" in prose even if it is not marked up with wrapper elements.

* [http://www.whatwg.org/specs/web-apps/current-work/#the-figure-element HTML 5 Draft Specification: <code style="text-decoration:underline"><figure></code> element]
* [http://edward.oconnor.cx/2007/08/figure-markup-redux Edward O'Connor: Figure markup redux]
* [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ Matthias Willerich: Figure Microformats]
* [[figure-examples]] (various authors)

Other references which were considered:

* [http://www.w3.org/MarkUp/html3/figures HTML 3 Specification: Figures] — never caught on, not implemented in browsers.
* [http://www.w3.org/Style/Examples/007/figures.html Bert Bos: figures & captions]
* [http://rjohara.net/server/css-figures-captions/ Robert J O'Hara: Scalable figures and captions with CSS and HTML]
* [http://www.cs.tut.fi/~jkorpela/www/captions.html Jukka Korpela: Image captions on Web pages]

== Copyright ==
This specification is released into the public domain.

{{MicroFormatPublicDomainContributionStatement}}

== Patents ==
{{MicroFormatPatentStatement}}

==See also==
*[[figure-examples]]
*[[figure-formats]]
*[[figure-brainstorming]]
*[[figure-issues]]

figure-examples

2009-02-15T21:50:27Z

MatthiasWillerich: Added link to the now existing draft figure 0.3, and updated the link to CwS article

<h1>Figure examples</h1>

'''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 ''' - [[User:Chris_Messina|Chris Messina]]

== The Problem ==
There are 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.

== The Draft ==
[[figure | A draft]] has been created that takes many of the suggestions of this discussion on board.

== Participants ==
* [[User:Chris_Messina | Chris Messina]]
* [[User:EdwardOConnor | Edward O'Connor]]
* [[User:AaronGustafson | Aaron Gustafson]]
* ...

== 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 <code>cnet-image-div</code>, '''<code>float-left</code>''', <code>cnet-image</code>, '''<code>image-credit</code>''' and '''<code>image-caption</code>''' to mark up supporting photographs and artwork.

See this example: [http://blogs.cnet.com/8301-13504_1-9758731-15.html?tag=cnetfd.blogs.item Why I recommend the iPhone -- and don't.]

=== HTML5 ===

HTML5 introduces a new tag called [http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#figure "figure"], which represents a block-level image, along with a caption:

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

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 here in order to have an accurate sense for how people mark up this kind of content in practice.

=== [http://factoryjoe.com/blog FactoryCity Blog] ===

* uses a series of <code>figure</code> classes to markup figures.
* the approach used is to mark up block level figures with both <code>figure</code> and either <code>figure-a</code> or <code>figure-c</code> classes.
* <code>figure-b</code> and <code>figure-d</code> are used for inline figures aligned right and left, respectively
* the a, b, c, d pattern is modeled after the top, right, bottom, left order of CSS attribute values
* Paul Wilkins [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html suggested more semantic names for these classes on µf-discuss]

=== [http://getk2.com K2 WordPress Theme] ===

* The K2 [http://kaytwo.googlecode.com/svn/trunk/style.css stylesheet] includes the following figure-related CSS:

<pre>
.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;
}
</pre>

=== [http://code.google.com/p/habari/ Habari K2 Theme] ===

Similar to K2, the [http://habari.googlecode.com/svn/trunk/htdocs/user/themes/k2/style.css Habari K2] instance supports the following classes:

<pre>
.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;
}
</pre>

=== [http://webrevolutionary.com/coldblue ColdBlue WordPress Theme] ===

* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures

=== [http://edward.oconnor.cx/ Edward O'Connor's blog] ===

* POSH figure markup, based on several inputs:
** HTML5's figure element
** RFC 2629's figure element
** [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html Paul Wilkins' class names]
* Documented in [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures], [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux], and described in [http://edward.oconnor.cx/profiles/figures XMDP]

=== Revenue Watch Institute (website forthcoming) ===

During the development of the new website for Revenue Watch, this was what we came up with to handle figures:

<pre>
<div class="figure">
<img src="/path/to/img.jpg" alt="" />
<p class="credit"><abbr class="type" title="Phtotograph">Photo</abbr> by <cite>Bob Johnson</cite></p>
<p class="caption"><em class="title">Figure 1</em> Cras rutrum, enim at placerat varius, nisi massa consectetuer.</p>
</div>
</pre>

* Figures can be categorized as types using the "type" <code>class</code> (here type is embedded in the credit line, using [[abbr-design-pattern|the <code>ABBR</code> design pattern]]) - current recommendations: "photograph" or "illustration" (these could possibly be extended to include other options such as "chart," "line-art", etc.) (optional)
* The "title" <code>class</code> can be added to any element within the figure (optional)
* Credit for the figure is denoted with the "credit" <code>class</code> (optional)
* A caption is also available (optional)

Default styles:

<pre>
.figure {
margin: 0 0 1.5em;
}
.figure p {
margin: 0;
width: auto;
}
.figure .credit {
font-size: .8em;
text-align: right;
}
.figure .credit cite {
font-style: inherit;
}
.figure .caption {
font-style: italic;
font-size: 1.1em;
}
.figure .title {
font-style: normal;
font-weight: bold;
}
.figure .title:after {
content: ":";
}
</pre>

No presentational information is added to the figures. The presentation is determined via script as a progressive enhancement ([http://www.alistapart.com/articles/figurehandler ALA article]).

Tables receive no figure-related styles, but graphs, charts, and maps do.

====Comments====
Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)

:For tangible entities (people, orgs, locations) hCard seems appropriate to me as well, however, figures can be illustrations or be composed of fictional (has this been addressed in hCard?) parts. In this case, "credit" could be defined as "text | hCard". Regarding hCard, TITLE or NOTE may be sufficient to define "credit". [[User:Csarven|Sarven Capadisli]] 09:55, 22 Feb 2008 (PST)

I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc.
[[User:AaronGustafson|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)

I like this idea, it certainly seems neat. Can we also please add an "optimisation" to explicitly say that if the IMG element itself has class="caption" then the TITLE attribute is taken to be the caption for the image. That way, we can support very minimal figures like this:
<pre>
<img class="figure caption" title="Sales data for March" src="march_sales.png"
alt="We've experienced a huge growth in Widget sales this month!">
</pre>
Through to more verbose figures including credits with [[hcard]], and categories via [[rel-tag]]. [[User:TobyInk|TobyInk]] 06:46, 18 Feb 2008 (PST)

=== [http://www.contentwithstyle.co.uk/ Content with Style] ===

In an attempt to bring together some of the ideas suggested, an addition to the Revenue Watch example was made. [http://www.contentwithstyle.co.uk/content/figure-microformats This solution] is based on
* Edward O'Connor's [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux]
* the [[#Revenue Watch Institute(website forthcoming)|Revenue Watch example]] and
* [[#HTML5|HTML5's figure element]] above

The idea was to group meta information about the image in a legend container, just like HTML5 does. This leads to more freedom when styling the figure block, as the information can be grouped or treated separately.
<pre>
<div class="figure">
<p class="image"><img src="/path/to/img.jpg" width="400" height="602" alt="Lorem ipsum dolor sit amet" /></p>
<div class="legend">
<p class="caption">Lorem ipsum dolor sit amet.</p>
<p class="credit">
<abbr class="type" title="Photograph">Photo</abbr>
&copy; <cite>John Doe</cite>
</p>
</div>
</div>
</pre>

* The "legend" class is not semantically needed -- "caption" and "credit" suffice. IMHO, it should be left out of the microformat, though of course (as with other microformats) authors are free to add additional elements and classes to their data to assist with styling. [[User:TobyInk|TobyInk]] 06:39, 18 Feb 2008 (PST)

== Further discussion ==

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

* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]
* [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures]
* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]
* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]
* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]
* [http://www.alistapart.com/articles/figurehandler If I Told You You Had a Beautiful Figure...] by AARON GUSTAFSON
* [http://www.contentwithstyle.co.uk/content/figure-microformats Figure Microformats]

User:MatthiasWillerich

2007-11-27T10:12:12Z

MatthiasWillerich: yay personal page!

Matthias Willerich is a London based web developer, and you can find more of his work at [http://www.contentwithstyle.co.uk Content with Style] and his own, forever under construction site [http://www.willerich.com willerich.com].

He's currently trying to make sense of the [[figure-examples]] in this wiki.

figure-examples

2007-11-25T16:05:29Z

MatthiasWillerich: Added Content with Style example code

<h1>Figure examples</h1>

'''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 ''' - [[User:Chris_Messina|Chris Messina]]

== The Problem ==
There are 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 ==
* [[User:Chris_Messina | Chris Messina]]
* [[User:EdwardOConnor | Edward O'Connor]]
* [[User:AaronGustafson | Aaron Gustafson]]
* ...

== 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 <code>cnet-image-div</code>, '''<code>float-left</code>''', <code>cnet-image</code>, '''<code>image-credit</code>''' and '''<code>image-caption</code>''' to mark up supporting photographs and artwork.

See this example: [http://blogs.cnet.com/8301-13504_1-9758731-15.html?tag=cnetfd.blogs.item Why I recommend the iPhone -- and don't.]

=== HTML5 ===

HTML5 introduces a new tag called [http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#figure "figure"], which represents a block-level image, along with a caption:

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

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 here in order to have an accurate sense for how people mark up this kind of content in practice.

=== [http://factoryjoe.com/blog FactoryCity Blog] ===

* uses a series of <code>figure</code> classes to markup figures.
* the approach used is to mark up block level figures with both <code>figure</code> and either <code>figure-a</code> or <code>figure-c</code> classes.
* <code>figure-b</code> and <code>figure-d</code> are used for inline figures aligned right and left, respectively
* the a, b, c, d pattern is modeled after the top, right, bottom, left order of CSS attribute values
* Paul Wilkins [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html suggested more semantic names for these classes on µf-discuss]

=== [http://getk2.com K2 WordPress Theme] ===

* The K2 [http://kaytwo.googlecode.com/svn/trunk/style.css stylesheet] includes the following figure-related CSS:

<pre>
.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;
}
</pre>

=== [http://code.google.com/p/habari/ Habari K2 Theme] ===

Similar to K2, the [http://habari.googlecode.com/svn/trunk/htdocs/user/themes/k2/style.css Habari K2] instance supports the following classes:

<pre>
.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;
}
</pre>

=== [http://webrevolutionary.com/coldblue ColdBlue WordPress Theme] ===

* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures

=== [http://edward.oconnor.cx/ Edward O'Connor's blog] ===

* POSH figure markup, based on several inputs:
** HTML5's figure element
** RFC 2629's figure element
** [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html Paul Wilkins' class names]
* Documented in [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures], [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux], and described in [http://edward.oconnor.cx/profiles/figures XMDP]

=== Revenue Watch Institute (website forthcoming) ===

During the development of the new website for Revenue Watch, this was what we came up with to handle figures:

<pre>
<div class="figure">
<img src="/path/to/img.jpg" alt="" />
<p class="credit"><abbr class="type" title="Phtotograph">Photo</abbr> by <cite>Bob Johnson</cite></p>
<p class="caption"><em class="title">Figure 1</em> Cras rutrum, enim at placerat varius, nisi massa consectetuer.</p>
</div>
</pre>

* Figures can be categorized as types using the "type" <code>class</code> (here type is embedded in the credit line, using [[abbr-design-pattern|the <code>ABBR</code> design pattern]]) - current recommendations: "photograph" or "illustration" (these could possibly be extended to include other options such as "chart," "line-art", etc.) (optional)
* The "title" <code>class</code> can be added to any element within the figure (optional)
* Credit for the figure is denoted with the "credit" <code>class</code> (optional)
* A caption is also available (optional)

Default styles:

<pre>
.figure {
margin: 0 0 1.5em;
}
.figure p {
margin: 0;
width: auto;
}
.figure .credit {
font-size: .8em;
text-align: right;
}
.figure .credit cite {
font-style: inherit;
}
.figure .caption {
font-style: italic;
font-size: 1.1em;
}
.figure .title {
font-style: normal;
font-weight: bold;
}
.figure .title:after {
content: ":";
}
</pre>

No presentational information is added to the figures. The presentation is determined via script as a progressive enhancement ([http://www.alistapart.com/articles/figurehandler ALA article]).

Tables receive no figure-related styles, but graphs, charts, and maps do.

====Comments====
Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)

I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc.
[[User:AaronGustafson|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)

=== [http://www.contentwithstyle.co.uk/ Content with Style] ===

In an attempt to bring together some of the ideas suggested, an addition to the Revenue Watch example was made. [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ This solution] is based on
* Edward O'Connor's [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux]
* the [[#Revenue Watch Institute(website forthcoming)|Revenue Watch example]] and
* [[#HTML5|HTML5's figure element]] above

The idea was to group meta information about the image in a legend container, just like HTML5 does. This leads to more freedom when styling the figure block, as the information can be grouped or treated separately.
<pre>
<div class="figure">
<p class="image"><img src="/path/to/img.jpg" width="400" height="602" alt="Lorem ipsum dolor sit amet" /></p>
<div class="legend">
<p class="caption">Lorem ipsum dolor sit amet.</p>
<p class="credit">
<abbr class="type" title="Photograph">Photo</abbr>
&copy; <cite>John Doe</cite>
</p>
</div>
</div>
</pre>
== Further discussion ==

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

* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]
* [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures]
* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]
* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]
* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]
* [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ Figure Microformats]

figure-examples

2007-11-25T12:11:32Z

MatthiasWillerich: Added Content with Style article

<h1>Figure examples</h1>

'''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 ''' - [[User:Chris_Messina|Chris Messina]]

== The Problem ==
There are 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 ==
* [[User:Chris_Messina | Chris Messina]]
* [[User:EdwardOConnor | Edward O'Connor]]
* [[User:AaronGustafson | Aaron Gustafson]]
* ...

== 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 <code>cnet-image-div</code>, '''<code>float-left</code>''', <code>cnet-image</code>, '''<code>image-credit</code>''' and '''<code>image-caption</code>''' to mark up supporting photographs and artwork.

See this example: [http://blogs.cnet.com/8301-13504_1-9758731-15.html?tag=cnetfd.blogs.item Why I recommend the iPhone -- and don't.]

=== HTML5 ===

HTML5 introduces a new tag called [http://www.whatwg.org/specs/web-apps/current-work/multipage/section-embedded.html#figure "figure"], which represents a block-level image, along with a caption:

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

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 here in order to have an accurate sense for how people mark up this kind of content in practice.

=== [http://factoryjoe.com/blog FactoryCity Blog] ===

* uses a series of <code>figure</code> classes to markup figures.
* the approach used is to mark up block level figures with both <code>figure</code> and either <code>figure-a</code> or <code>figure-c</code> classes.
* <code>figure-b</code> and <code>figure-d</code> are used for inline figures aligned right and left, respectively
* the a, b, c, d pattern is modeled after the top, right, bottom, left order of CSS attribute values
* Paul Wilkins [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html suggested more semantic names for these classes on µf-discuss]

=== [http://getk2.com K2 WordPress Theme] ===

* The K2 [http://kaytwo.googlecode.com/svn/trunk/style.css stylesheet] includes the following figure-related CSS:

<pre>
.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;
}
</pre>

=== [http://code.google.com/p/habari/ Habari K2 Theme] ===

Similar to K2, the [http://habari.googlecode.com/svn/trunk/htdocs/user/themes/k2/style.css Habari K2] instance supports the following classes:

<pre>
.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;
}
</pre>

=== [http://webrevolutionary.com/coldblue ColdBlue WordPress Theme] ===

* includes the classes <code>float-left</code> or <code>float-right</code> for aligning figures

=== [http://edward.oconnor.cx/ Edward O'Connor's blog] ===

* POSH figure markup, based on several inputs:
** HTML5's figure element
** RFC 2629's figure element
** [http://microformats.org/discuss/mail/microformats-discuss/2007-August/010421.html Paul Wilkins' class names]
* Documented in [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures], [http://edward.oconnor.cx/2007/08/figure-markup-redux Figure markup redux], and described in [http://edward.oconnor.cx/profiles/figures XMDP]

=== Revenue Watch Institute (website forthcoming) ===

During the development of the new website for Revenue Watch, this was what we came up with to handle figures:

<pre>
<div class="figure">
<img src="/path/to/img.jpg" alt="" />
<p class="credit"><abbr class="type" title="Phtotograph">Photo</abbr> by <cite>Bob Johnson</cite></p>
<p class="caption"><em class="title">Figure 1</em> Cras rutrum, enim at placerat varius, nisi massa consectetuer.</p>
</div>
</pre>

* Figures can be categorized as types using the "type" <code>class</code> (here type is embedded in the credit line, using [[abbr-design-pattern|the <code>ABBR</code> design pattern]]) - current recommendations: "photograph" or "illustration" (these could possibly be extended to include other options such as "chart," "line-art", etc.) (optional)
* The "title" <code>class</code> can be added to any element within the figure (optional)
* Credit for the figure is denoted with the "credit" <code>class</code> (optional)
* A caption is also available (optional)

Default styles:

<pre>
.figure {
margin: 0 0 1.5em;
}
.figure p {
margin: 0;
width: auto;
}
.figure .credit {
font-size: .8em;
text-align: right;
}
.figure .credit cite {
font-style: inherit;
}
.figure .caption {
font-style: italic;
font-size: 1.1em;
}
.figure .title {
font-style: normal;
font-weight: bold;
}
.figure .title:after {
content: ":";
}
</pre>

No presentational information is added to the figures. The presentation is determined via script as a progressive enhancement ([http://www.alistapart.com/articles/figurehandler ALA article]).

Tables receive no figure-related styles, but graphs, charts, and maps do.

====Comments====
Why is "credit" not an hCard? Also, for pictures of places any geo/ hcard microformat included in the caption should be understood to be associated with the figure. There is debate elsewhere, about whether coordinates should be for the camera position, or the object photographed; with consensus coming down on the side of the former [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Geotagging_the_camera_or_the_Objekt], [http://commons.wikimedia.org/wiki/Commons_talk:Geocoding#Camera_vs_object_location]. That said, the whole "figure" div could be an hcard, with the picture being part of that; and a separate hCard for the photographer included. Complex... [[User:AndyMabbett|Andy Mabbett]] 16:52, 21 Aug 2007 (PDT)

I like the idea of the hCard <em>if</em> there is more information available other than just the name. If you are just putting the person's name, I still don't see the point of making that an hCard. Add some additional data (a link, email address, etc.) and I think you have an argument. Otherwise I think it's a waste of markup and simply clutters the results of whatever hCards might exist elsewhere on the page. As for geo-data, I think that sort of information may be useful, but I think I'd prefer to see that embedded within a <code>longdesc</code> page with more info on the image. Inside an article it seems superfluous to me. A <code>longdesc</code> page for an image could include much more data about where it was taken, by whom (possibly even a full hCard of the creator), etc.
[[User:AaronGustafson|Aaron Gustafson]] 18:24, 22 Aug 2007 (EDT)

== Further discussion ==

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

* [http://factoryjoe.com/blog/2007/02/26/a-design-pattern-for-image-and-figure-alignment/ A design pattern for image and figure alignment]
* [http://edward.oconnor.cx/2007/04/marking-up-figures Marking up figures]
* [http://www.css3.info/styling-figures-with-css3/ Styling figures with CSS3]
* [http://www.simplebits.com/notebook/2005/07/10/figures.html When Floated Figures Attack!]
* [http://www.pearsonified.com/2007/06/how-to-format-images-for-feed-readers.php How to Format Images for Feed Readers]
* [http://www.contentwithstyle.co.uk/Articles/161/figure-microformats/ Figure Microformats]