APEX@IGP-FX
32
F10: Common Media (media-rw)
The Common media blocks are
- Image
- Icon
- Figure
- Plate
- Map
- Illustration
- Video
- Audio
- Animation
Associated special elements
- Insertion point
Media Blocks
There are different naming systems for what is a figure, illustration, plate or other graphic inserted onto a page. IGP:Foundation XHTML (FX) makes the primary difference based on ease of interpretation of source material in editorial processes and retrodigitization so has a relatively wide set of media genres which can be extended at any time.
In addition to their semantic value, media blocks carry a number of presentation statements which inform any capable processor or device how they are to be presented, if it has the presentation capabilities.
General usage
Note that control of Media Block internal content is done by inheritance from the media block structural definition. In standard documents media blocks will be inserted into the galley-rw section-rw, but can also be inserted into other structures such as noteboxes and lists. This is important for interactive pages which are not intended for print.
Media blocks cannot be inserted inside paragraphs using the <div> statement, but an insertion point instruction can be placed in an explicit location inside a paragraph, or any other content as an inline processing instruction.
Image
An image is un-numbered but generally has a contextual relationship with the content flow. It will be inserted into a position in the text relevant based on an editorial or design decision. It does not have to have any content other than the image.
Images frequently have sizing and galley float (left / center / right) properties applied. These are terms layout properties. This is illustrated here for completeness and is handled in detail in the layout properties topic.
The following standard tagging patterns show image in simple, annotated and floated forms.
media-rw image-rw Standard Tagging Patterns
***** Image Simple *****
<div class= "media-rw image-rw ”>
<img src="filename.jpg" alt="alternative text">
</div>
***** Image Annotated *****
<div class= "media-rw image-rw">
<h4>Heading</h4>
<img src="filename.jpg" alt="alternative text">
<p class="caption-rw"> Caption text </p>
</div>
***** Image Annotated and Floated *****
<div class= "media-rw image-rw float-right-rw width-50-rw">
<h4>Heading</h4>
<img src="filename.jpg" alt="alternative text">
<p class="caption-rw"> Caption text </p>
</div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
image-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used without number generators.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Layout Properties
These applied layout properties are for example only. See the Layout Control Topic for more information
float-none-rw The object is not allowed to float on the page out of its position
float-galley-right-rw The image is floated to the right side of the galley
align-right-rw The images is aligned to the right in its container
width-20-rw The image is 20% of the galley width.
Visual example of media with layout control properties
This is an image that has been resized and floated. Two images are floated to the left, and one to the right. Bodytext will flow around them appropriately but in a rectangular manner without additional processing.
Content is irreducible complex across the information continuum, and many tagging grammars are possible and exist. Content is an infinite set of data, with an infinite set of interpretations to fully address the requirements of different individuals and organizations in multiple contexts. FX is another semantic tagging interpretation of the content universe. What makes it different is that it has been designed from a decade of digitization and content processing experience across millions of pages of academic, business and educational material, and it has been purposely designed with low total cost of ownership as a significant objective.
Figure
Figure is used where the source document clearly identifies a picture as an numbered figure. Figures must be numbered and the caption contains a number element. This is used for both number generation and depending on the media block type, the caption label is automatically generated.
It is typical in a print book that uses figures they float to standard top or bottom page positions on the page or column. The position for print and for online or devices may be different. In print the position is usually defined on a page position immediately following its reference in text. Therefore if the text says "See figure 2.4", figure 2.4 should be on the same page, next page or worse case page after, depending on the number of figures in the text. In academic or educational work, figures may be vying for a page position with tables as well.
FX is designed to allow the image to be positioned in the flow for best position with electronic assets (continuous scrolling text) and a print insertion point can be applied to indicate where an image should be anchored.
Figure tagging must enable auto number generation or regeneration, List of Figures (LOF) generation, harvesting, reuse, and format processing.
Positioning figures.
media-rw figure-rw Standard Tagging Patterns
***** Simple Figure ***** <div class= "media-rw figure-rw"> <h4>Title</h4> <img src="filename.jpg" alt="alternative text"> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
***** Floated Figure *****
<div class= "media-rw figure-rw float-top-next-rw floatgalley-none-rw
align-left-rw width-auto-rw">
<h4>Title</h4>
<img src="filename.jpg" alt="alternative text">
<p class="caption-rw">
<span class="num-rw">1.1</span>
Caption text </p>
</div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
figure-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Layout Properties
These applied layout properties are for example only. See the Layout Control Topic for more information
float-none-rw The object is not allowed to float on the page out of its position
float-galley-right-rw The image is floated to the right side of the galley
align-right-rw The images is aligned to the right in its container
width-20-rw The image is 20% of the galley width.
Icon paragraph
Icon. This is a special class of image. Generally Icons are carried from the CSS where possible and viewing devices allow.
media-rw icon-rw Standard Tagging Patterns
***** Simple Icon Paragraph ***** <div class= "media-rw icon-rw ”> <h4>Title</h4> <img src="filename.jpg" alt="alternative text"> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
icon-para-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Plate
Plate: Used where the source document uses the term Plate in the images. Plate pages are often inserted unnumbered pages.
media-rw plate-rw Standard Tagging Patterns
********** used for numbered plates <div class= "media-rw plate-rw ”> <h4>Title</h4> <img src="filename.jpg" alt="alternative text"> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
plate-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Map
Map is used where the source image clearly identifies a graphic as a map. These do not have to be numbered but it is recommended. The principle purpose of tagging maps is to explicitly handle documents where maps are important.
Fantasy or fictional maps should be tagged as images or illustrations unless there is a specific need in a book to generate a List of Maps.
map-rw figure-rw Standard Tagging Patterns
media-rw map-rw Standard Tagging Patterns
***** Extended Map *****
<div class= "media-rw map-rw ”>
<h4>Title</h4>
<img src="filename.jpg" alt="alternative text">
<p class="caption-rw">
<span class="num-rw">1.1</span>
Caption text </p>
</div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
map-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Illustration
Illustration: Used where the source document uses the term Illustration.
media-rw illustration-rw Standard Tagging Patterns
********** Used for numbered illustrations <div class= "media-rw illustration-rw ”> <h4>Title</h4> <img src="filename.jpg" alt="alternative text"> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
illustration-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
SVG
Image Statement
media-rw svg-rw Standard Tagging Patterns
media-rw svg-rw Standard Tagging Patterns
********** used for numbered figures <div class= "media-rw svg-rw ”> <h4>Title</h4> <!-- EMBEDDING CODE --> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
svg-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Video
Image Statement
media-rw video-rw Standard Tagging Patterns
media-rw video-rw Standard Tagging Patterns
********** Used for embedded or streaming video windows <div class= "media-rw video-rw ”> <h4>Title</h4> <!-- EMBEDDING CODE --> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
video-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Audio
Audio is defined specifically for the insertion of stand-alone audio files into a page context. In some contexts there may be a lot of references on a page\
media-rw audio-rw Standard Tagging Patterns
********** Used for embedded audio file players <div class= "media-rw audio-rw ”> <h4>Title</h4> <!-- EMBEDDING CODE --> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
audio-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
Animation
Image Statement
media-rw animation-rw Standard Tagging Patterns
********** Used for embedded flash, silverlight or other animations <div class= "media-rw animation-rw ”> <h4>Title</h4> <!-- EMBEDDING CODE --> <p class="caption-rw"><span class="num-rw">1.1</span> Caption text </p> </div>
m
media-rw The primary structure type definer. This should always be positioned first in the selector sequence for human readibility and must always be present.
animation-rw The named structure definer. This should always be positioned second in the selector sequence for human readibility and must always be present.
<img src="..." alt="alt text"> The image reference is inserted without any attributes other than to alternative text. This is very important as the stylesheet or processor do all image positioning based on the ability of the renderer or formatter. Alternative text is provided for accessibility, and text substitution where appropriate.
<h4> When headers are used they must start at heading level 4. Levels 5 and 6 can also be used.
caption-rw The caption is used with the num-rw element for auto number generation.
num-rw The element containing the number and content type generation.
<p> Paragraphs can be used in the block and will inherit the bodytext behaviour unless styled differently within the block
© 2005-2012 Infogrid Pacific. All rights reserved.