Microformats Wiki - User contributions [en]

User:LyricsBoy

2007-09-28T01:30:48Z

LyricsBoy:

Brian Hardy of [http://ponystyle.com Ponystyle Industries]

figure-examples

2007-09-28T01:27:18Z

LyricsBoy: /* Revenue Watch Institute (website forthcoming) */ cam -> came

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

figure-examples

2007-09-28T01:23:36Z

LyricsBoy: /* Existing Practices */ herein -> here in

<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 cam 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]