F10: Common Media Selectors

Media Block Overview

Media blocks are designed to carry one image, video or audio object only which may or may not contain descriptive or rights metadata. They are not image collection galleries, containers or catalogues. Use layout selectors to create multiple image presentations.

A special class of media blocks for print is Plates. While plates come into the media-rw operation their creation and usage is very different.

Common Media Blocks

.media-rw

The parent selector for all media blocks of all types.

.media-rw .figure-rw

A media block containing a figure which may be text, table or image and always has a caption, and may have headings commencing from <h4>

.media-rw .icon-para-rw

A media block containing a paragraph of text and a significant icon image indicating the purpose or content of the paragraph. Used in text and trade books with icons and headings such as Warning, More Information, Hint, etc.

.media-rw .illustration-rw

A media block containing an illustration which may be text, table or image and always has a caption, and may have headings commencing from <h4>.

.media-rw .image-rw

A media block for any picture that is not a captioned illustration or other semantic media block.

.media-rw .map-rw

A media block containing a map or part of a map that may or may not have headings starting with <h4> and a numbered caption.

.media-rw .plate-rw

A media block containing a plate image that has a caption.

.media-rw .caption-rw

A pragmatic paragraph that within the context of a media-rw block becomes the caption and contains the image sequence number for referencing from text and named lists.

Media Block Headings & Text

Media blocks follow the text block rules for the same reasons of accessibility control and named list generation. If necessary media-rw can contain <h4> to <h6>. It is highly unlikely that this will be required. If an image has extensive text associated with it this is better tagged into an appropriate text block which contains the text and the image block is inserted into the text block. 

.media-rw h4

.media-rw h5

.media-rw h6

.media-rw p

Media Blocks can contain normal paragraphs if required.

.caption-rw

A pragmatic paragraph that is the caption for the media block in which it is contained.

.source-rw

A pragmatic paragraph that is the source statement for the media block in which it is contained.

Print Plate Page Media Blocks

Print plate supports the layout of various page designs for print. For e-reader products these blocks should be set with the exclude-reader-rw processing instruction applied, and the images inserted into the body text at the appropriate location with exclude-print-rw processing instruction selectors applied.

.plate-rw

A single image constrained to the page galley

.plate-gutter-rw

A plate image is contained within the page galley except it extends to the gutter.

.plate-page-rw

A plate image extends to the page bleed on all sides.

.plate-spread-rw

An image that spreads across two pages but is constrained by the galley.

.plate-page-spread-rw

.plate-float-spread

.plate-float-page-rw

.plate-spread-aligned-rw

.plate-page-spread-aligned-rw

.plate-align-top-rw

.plate-align-bottom-rw

.plate-align-left-rw

.plate-align-right-rw

Rich Media Blocks and Inline

Rich media blocks extend the presentation functionality of HTML5 to allow quick and easy insertion of video and audio, with print placeholders.

.video-rw

A standard container for an HTML5 video element, multiple source elements, a picture and player support warning.

.video-controls-rw

A standard block containing an HTML5 video element, multiple source elements, a picture and support warning. By default it has the HTML5 controls property on.

.audio-controls-rw

A standard block containing an HTML5 audio element, multiple source elements, and support warning. By default it has the HTML5 controls property on.

.audio-block-rw

A standard block for an HTML5 video element which is triggered by an interaction on an image or block. Javascript is provided by AIE.

.audio-inline-rw

A standard inline block for an HTML5 video element which is triggered by an interaction on an image or block. Javascript is provided by AIE.