Figures
Introduction
A figure is an image with a caption. It can also include associated metadata such as artist's credit and a link to a magnified version. Figures are marked up by the fig element. Using fig instead of raw HTML has two advantages: it makes image markup easier, and it helps in the separation of structure and presentation, which is considered crucial for good design.
Using fig also helps in ‘future-proofing’ your markup. Images is an area of HTML that is currently undergoing changes. Upcoming HTML specifications are set to introduce new ways for marking up image blocks. While it takes many years before support for new HTML features get adopted by the major web browsers, fig, as implemented in nelson, bridges this gap by providing similar (better, in fact) functionality in a way that is usable today. And in a way that can later be made to take advantage of any upcoming HTML feature just by changing how nelson generates its output.
Also, faster processors and improved JavaScript support in Web browsers have popularized a new effect: animated thumbnail expansion/contraction. Unfortunately, not only are the calls to these scripts by their very nature presentational (thereby breaking structure separation), there are many competing scripts with different call interfaces. Using fig makes it possible to harness this effect without having to deal with the script specific markup on the image elements.
The fig element
The fig element acts as a container for the properties of the figure. For example, a simple captioned image might have the markup
<fig>
<img src="beach.jpg" />
<caption>Sunset at Tropical Beach</caption>
</fig>
Supported properties (elements) are: img, caption, legend, link, credit, license and copyright. Elements can be listed in any order. Elements not recognized by nelson are silently skipped over.
On output, the <fig> opening tag will be transformed to
<div class="fig" style="width:npx">
where n is the width of the div's content in pixels. A class attribute, if present, will be appended to the value of class as additional class(es). Any inline style rules, if present, will be inserted before the width rule. And any other attributes will be included verbatim.
The fig container element also forms the outer border of the figure. The default border style, as defined in the accompanying nelson.css file, and as rendered above, is achieved by
div.fig {
border: 1px solid #999;
padding: 0.2em;
}
To center a figure, specify <fig class="center"> and install the CSS rule
div.fig.center { margin-left: auto; margin-right: auto; }
The img element
The img element (inside a fig) specifies the image to render for the figure. The element's markup is copied to output as is, except for the following:
- The alt attribute, if missing, is added as an empty string.
- The width and height attributes, if missing, are added as described in img.
- A border-width inline style rule is added. By default, this is set to 0px (but see below).
- If the border attribute is present, it is removed and its value is moved to the border-width inline style rule.
Specifying img border width
To specify the border width for an img inside a fig, use the border attribute. Do not use a CSS rule. For example, to specify a 1 pixel wide border, use
<img src="beach.jpg" border="1" />
Technical explanation. Nelson calculates the total content width of fig. In order to do this, it needs to know the width of the img's border, if any. Traditionally, there are two ways to specify border width for images: the border attribute and a CSS rule. Because nelson does not parse CSS stylesheets (or inline rules), the former method is the only one that nelson will recognize. In fact, specifying border-width through CSS would have no effect as it will be overridden by a generated inline rule. (Other style rules, such as border-color, may of course be specified through CSS.)
For output, nelson will remove the border attribute and move the width value to a border-width inline style rule. This is done for compatibility with the XHTML 1.0 Strict document type, where the border attribute is not supported. The border attribute therefore ends up being a mere communication device between the user and nelson. The attribute itself will not feature in nelson's output. Instead, for example the above img tag would be transformed to
<img src="beach.jpg" width="300" height="200" style="border-width: 1px;" />
The caption element
The caption element defines a descriptive word or phrase to display under the image.
<caption>Word or phrase</caption>
Being a block level element, caption may contain any markup that would be valid for a generic div element. It can not, however, contain another nested fig.
The width of the caption block will be clamped to the width calculated for the image property (see “The img element” above).
By default, the contents of caption are aligned center.
The legend element
The Chicago Manual of Style distinguishes a figure legend (extended prose) from a figure caption (a descriptive word or phrase only). In typesetting, a legend is typically left-justified, while a caption is centered under the image.
<legend>Extended prose...</legend>
Within fig, the legend element can be used instead of, or in addition to, the caption element. When both are defined, legend is reserved for overlay displays such as those generated by a thumbnail expander script (see “Highslide support” below).
Future versions of nelson may have other ways for making use of both a caption and a legend at the same time. When the extended prose for a legend is readily available, users are encouraged to markup both. The element will not take up space in the HTML output unless it gets used.
By default, the contents of legend are left-justified.
The link element
The link element (inside a fig) defines a resource to link to. The presence of this element will cause the figure to be active and clickable. The linked-to resource is specified by the href attribute
<link href="http://www.example.com/path/name" />
The link element can also have an attribute called rel. The rel attribute defines the relationship between the figure and the resource the link refers to. Any value that would normally be valid for the rel attribute of the HTML a (anchor) element is also applicable here. For example
<link href="http://www.example.com/path/name" rel="nofollow" />
Highslide support
Specifying rel="highslide" in the link tag causes output to be generated for Torstein Hønsi's Highslide thumbnail expander. Highslide is a JavaScript package that performs an image expansion effect within the active browser window.
When generating markup for Highslide, nelson performs automatic insertion of Highslide specific class names and elements. If legend is defined, it will be used with the expanded image.
Here is a complete example (the bolded text is the only part that is specific to Highslide)
<fig>
<img src="goa-beach-180px.jpg" />
<link href="goa-beach-640px.jpg" rel="highslide" />
<caption>Beach in Goa, India</caption>
<legend><b>Beach in Goa, India.</b> Goa, being in the
tropical zone and near the Arabian Sea, has a warm and
humid climate for most of the year. The month of May
is the hottest, seeing day temperatures of over 35 °C
(95 °F) coupled with high humidity.</legend>
</fig>
To see the effect, click on the thumbnail (right). Note the legend text under the expanded image.
It is still necessary to separately arrange for the loading of the Highslide JavaScript module and its associated CSS rules at the beginning of the HTML file (as described in the Highslide documentation). But the per figure changes in the markup (to activate the effect) have been reduced to a single attribute.
The Highslide script may be obtained from the Highslide website. Note: in order for the script to work with nelson, the highslide.js file must be configured with the “Unobtrusive” option.
The credit element
The credit element specifies the name of the photographer, artist or creator of the image. For example
<credit>Eadweard Muybridge</credit>
The credit property is not currently featured in nelson's output, but this may change in a future version.
The license element
The license element specifies the name of the license under which the image is licensed.
Creative Commons licenses can be specified using standard identifiers. For example, for images licensed under the Creative Commons Attribution ShareAlike 2.0 license, the short form is
<license>cc-by-sa-2.0</license>
The license property is not currently featured in nelson's output, but this may change in a future version.
The copyright element
The copyright element specifies the copyright notice for the image. For example
<copyright>Copyright 2008 Acme, Inc. All Rights Reserved.</copyright>
The copyright property is not currently featured in nelson's output, but this may change in a future version.