F12:Layout Selectors

Overview

Layout selectors is a very IGP:FoundationXHTML concept within a digital content vocabulary. These selectors are practical in use for print and digital content but depend completely on the rendering engine understand the CSS Column properties. The columns are most useful for complex books such as text books or highly designed trade books. These patterns are exemplars that can be modified or extended for any specific book design.

Layout Control Blocks     

.cols-rw

The group selector for all column blocks.

.col-2-rw

Denotes that this block should be presented as two columns if the rendering agent has the capabilities.

.col-3-rw

Denotes that this block should be presented as three columns if the rendering agent has the capabilities.

.col-4-rw

Denotes that this block should be presented as four columns if the rendering agent has the capabilities.

.col-5-rw

Denotes that this block should be presented as five columns if the rendering agent has the capabilities.

.col-6-rw

Denotes that this block should be presented as six columns if the rendering agent has the capabilities.

Outside columns     

.col-7x1-rw

Denotes that if a rendering agent has the capabilities this block should be presented as a text column that is the equivalent of seven columns wide with a margin column that is one column wide and the text content is six columns wide.

Following are the float selectors that work with .col7x1-rw.

div.col-7x1-rw div.floatgalley-outside-rw

div.col7x1-rw div.floatgalley-inside-rw

div.col-7x1-rw span.floatgalley-outside-rw

div.col-7x1-rw span.floatgalley-outside-rw div.floatgalley-outside-rw

div.col-7x1-rw div.flow-margin-rw

.col6x4-rw

Denotes that if a rendering agent has the capabilities this block should be presented with the equivalent of six columns wide with a margin column that is two columns wide and the text content is four columns wide.

Following are the float selectors that work with .col6x4-rw.

div.col-6x4-rw div.floatgalley-outside-rw

div.col6x4-rw div.floatgalley-inside-rw

div.col-6x4-rw span.floatgalley-outside-rw

div.col-6x4-rw span.floatgalley-outside-rw div.floatgalley-outside-rw

div.col-6x4-rw div.flow-margin-rw

div.col-6x4-rw div.flow-galley-rw div.figure-rw

.col-5x3-rw

Denotes that if a rendering agent has the capabilities this block should be presented with the equivalent of five columns wide with a margin column that is two columns wide and the text content is three columns wide.

Following are the float selectors that work with .col5x3-rw.

div.col-5x3-rw div.floatgalley-outside-rw

div.col5x3-rw div.floatgalley-inside-rw

div.col-5x3-rw span.floatgalley-outside-rw

div.col-5x3-rw span.floatgalley-outside-rw div.floatgalley-outside-rw

.col-5x3-rw div.flow-margin-rw

div.col-5x3-rw div.flow-galley-rw div.figure-rw

.col-4x3-rw

Denotes that if a rendering agent has the capabilities this block should be presented with the equivalent of four columns wide with a margin column that is one column wide and the text content is three columns wide.

Following are the float selectors that work with .col4x3-rw.

div.col-4x3-rw div.floatgalley-outside-rw

div.col4x3-rw div.floatgalley-inside-rw

div.col-4x3-rw span.floatgalley-outside-rw

div.col-4x3-rw span.floatgalley-outside-rw div.floatgalley-outside-rw

.col-4x3-rw .flow-margin-rw

div.col-4x3-rw div.flow-galley-rw div.figure-rw

General Block Width Statements     

.width-10-rw

Set this block to 10% of the width of its parent block.

.width-20-rw

Set this block to 20% of the width of its parent block.

.width-30-rw

Set this block to 30% of the width of its parent block.

.width-40-rw

Set this block to 40% of the width of its parent block.

.width-50-rw

Set this block to 50% of the width of its parent block.

.width-60-rw

Set this block to 60% of the width of its parent block.

.width-70-rw

Set this block to 70% of the width of its parent block.

.width-80-rw

Set this block to 80% of the width of its parent block.

.width-90-rw

Set this block to 90% of the width of its parent block.

.width-auto-rw

Set this block to the width of its parent block.

.width-fixed-rw

Set this block to  the width defined by its components without reference to the parent block width.

.width-fixed-rw .pc-rw img

.width-fixed-rw .pc-rw object

.pc-rw

Position control block contained in media blocks to allow independent flow, float and presentation control of the inner elements.

.pc-rw img

.pc-rw table

.pc-rw object

.pc-rw p

div.pc-rw > :first-child

div.pc-rw > :last-child

.layoutwidth-10-rw

The layout width selectors control only the width of the content of the independent layout control block.

.layoutwidth-20-rw

.layoutwidth-30-rw

.layoutwidth-40-rw

.layoutwidth-50-rw

.layoutwidth-60-rw

.layoutwidth-70-rw

.layoutwidth-80-rw

.layoutwidth-90-rw

.layoutwidth-auto-rw

.align-left-rw

Align the contents of this block to the left.

.align-left-rw table

.align-left-rw .pc-rw

.align-left-rw .pc-rw img

.align-left-rw .pc-rw object

.align-center-rw

Align the contents of this block to the center.

.align-center-rw table

.align-center-rw .pc-rw

.align-center-rw .pc-rw img

.align-center-rw .pc-rw object

.align-right-rw

Align the contents of this block to the right.

.align-right-rw table

Applied if the content is a table.

.align-right-rw .pc-rw

the internal position control block for internal content control

.align-right-rw .pc-rw img

Applied if the content is an image

.align-right-rw .pc-rw object

Applied if the content is any other content.

Block float properties     

.floatgalley-left-rw

Float this block to the left side of the galley.

.floatgalley-left-rw > .pc-rw

div.floatgalley-left-rw .pc-rw img

.floatgalley-right-rw

Float this block to the right side of the galley.

.floatgalley-right-rw > .pc-rw

div.floatgalley-right-rw .pc-rw img

.floatgalley-outside-rw

Float this block to the outside margin if available.

.floatgalley-outside-rw > .pc-rw

div.floatgalley-outside-rw img

.floatgalley-inside-rw

Float this block to the inside margin if available.

.floatgalley-inside-rw > .pc-rw

.flow-margin-rw

Size this block to the width of the page and into the margins if the rendering engine has the capabilities.

.flow-galley-rw

Size this block to the width of the galley if the rendering engine has the capabilities.

.float-top-rw

Float this block to the top of the page if the rendering engine has the capabilities.

.float-top-next-rw

Float this block to the top of the next page if the rendering engine has the capabilities.

.float-bottomrw

Float this block to the bottom of the page if the rendering engine has the capabilities.

.float-bottom-next-rw

Float this block to the bottom of the next page if the rendering engine has the capabilities.

.bottom-fl-rw

.float-column-top-rw

Float this block to the top of the column if the rendering engine has the capabilities.

.float-column-bottom-rw

Float this block to the bottom of the column if the rendering engine has the capabilities.

.float-none-rw

Do not float this block.