Version 1.0
Last Revised: June 14, 2002
This section of the guidelines will explain the elements used to mark up images and their associated captions and descriptions.
Definition: An image is a graphical object presented in a visual format.
Markup: The <img> element may be used alone to mark a single image. However, if there is an associated caption and/or a <prodnote> containing a description of the image, the <imggroup> tag should be used. The <imggroup> element provides a container for one or more <img>s and associated <caption>(s) and <prodnote>(s). The <imggroup> element may contain:
1) multiple <img>s if they share a caption, with the ids of each <img> referenced by the imgref attribute on <caption>, e.g., <caption imgref="id1 id2 ...">,
2) multiple <caption>s if several captions refer to a single <img>. When the <img> has id="xxx", each caption would have the same value for imgref, i.e., <caption imgref="xxx">,
3) multiple <prodnote>s if different versions are needed for different media (e.g., large print, braille, or print). If several <prodnote>s refer to a single <img> with id="xxx", each prodnote would have the same <prodnote imgref="xxx"> but each <prodnote> would have a different value for the showin attribute to control which media it is displayed in. See Information Object: Producer's Note in Part II(b): Block Elements. If multiple <prodnote>s refer to a group of images, the imgref attribute would include the ids of all images in that group, e.g., <prodnote imgref="id1 id2 id3 ...">.
The alt attribute is required for all <img>s and should contain a short description (often the caption) of the image.
For DTB purposes, images will be tagged simply to mark their location in the book. The SMIL file(s) will control the presentation of images, so it is not necessary (nor are the requisite attributes provided in the DTBook DTD) to attempt to control image display from the markup in the textual content file.
Element:
<imggroup>...</imggroup> <img>...</img> <caption>...</caption> <prodnote>...</prodnote>
Example 1 shows markup for a single image and its associated <caption> and <prodnote>.
<imggroup id="imggrp_2>
<img id="img1_1" src="fig1_01.png" alt = "By the way, Sam, as someday you'll be paying for my entitlements, I'd like to thank you in advance."/>
<prodnote imgref="img1_1" id="pnote_p3" showin="blp">Reader's note: A cartoon shows a father in his easy chair looking at the newspaper. As his small son plays with a pull toy on the floor next to him, the father says to the boy, "By the way, Sam, as someday you'll be paying for my entitlements, I'd like to thank you in advance." End of note.</prodnote>
</imggroup>
Example 2 shows markup for two images that share a single <caption> and two <prodnote>s. The first <prodnote> will show only in a braille version of the textual content file, the second in either a print or large-print version.
<imggroup id="imggrp_43>
<img id="img_12" src="orion62.jpg" alt = "Orion Nebula by visible and ultraviolet light"/>
<img id="img_13" src="orion3.jpg" alt = "Young stars in Orion Nebula"/>
<caption imgref="img_12 img_13">Many young stars lie inside the mass of gas and dust that forms the Orion Nebula.</caption>
<prodnote imgref="img_12 img_13" id="pnote_19" showin="bxx">Two images of the Orion Nebula are shown, revealing many small points of light within the swirling mass of gas and dust that forms the nebula.</prodnote>
<prodnote imgref="img_12 img_13" id="pnote_20" showin="xlp">The two images of the Orion Nebula shown above reveal many small points of light within the swirling mass of gas and dust that forms the nebula.</prodnote>
</imggroup>
Copyright © 2002 DAISY Consortium