F12: Layout

Overview

Layout selectors is a IGP:FoundationXHTML (FX) concept within the gamut of a working digital content vocabulary. Layout selectors are strictly reserved for presentation control. However presentation control is what formats are all about.

Design Profile Selectors

The most important group in Layout is Design Profiles which allow the dynamic generation of multiple print or e-book editions with significantly different content and designs from a single FX file. Once the tagging patterns are in place this is done dynamically at any time. Design Profiles allow the exclusive inclusion of sections or blocks in a specific edition. For example a text-book can be generated from the one FX as a students edition and a teachers edition, where the additional information for the teach is enclosed in Design Profile blocks throughout the book.

Other Layout Selectors

Other layout selectors are columns and page positioning selectors for blocks. These selectors are practical in use for print and digital content but depend completely on the rendering engine understand the CSS 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.

Design Profiles

Design Profiles is one of the biggest and most significant selector group in FX. It is so important it gains its own prefix dp-.

Design Profiles introduces the concept of exclusive include from a design profile processing context. The processing tools must exist to exert the Design Profiles rules and act on the design profiles selectors.

The requirement that is addressed by Design Profiles is the immediate generation of multiple and differently designed editions from one master FX file. This must cover multiple print editions, multiple eBook editions, plus other formats such as a Static Site, Web App or Fixed Layout ePub. FX defines a set of common Design Profile selectors that can be applied at the section and block level. These are listed in the Layout Selector section.

Design Profile Sections

This is illustrated with the following two tagging patterns. 

<div class="frontmatter-rw BookTitlePage-rw dp-HardCover-rw">
    <div class="book-title-block-rw">
        <h1>Book Title</h1>
        <p class="title-sub-rw">Book Sub-title</p>
        <p class="title-author-rw">Author's name</p>
        <p class="title-contributor-rw">Preface by amazingly famous person</p>
    </div>
</div>
<div class="frontmatter-rw Preface-rw dp-HardCover-rw">
    <div class="book-title-block-rw">
        <h1>Preface</h1>
        <p class="title-contributor-rw">Preface by amazingly famous person</p>
    </div>
    <p> Preface content starts .... </p>
</div>

Processors must inserted only this title page and Preface section into the section sequence when the Hard Cover Design Profile is invoked. All other title pages are ignored. Any other Design Profile will ignore the Preface.

<div class="frontmatter-rw BookTitlePage-rw dp-MassMarket-rw">
    <div class="book-title-block-rw">
        <h1>Book Title</h1>
        <p class="title-sub-rw">Book Sub-title</p>
        <p class="title-author-rw">Author's name</p>
        <p class="title-other-rw">New Condensed Edition</p>
    </div>
</div>

If present processors must inserted only this title page into the section sequence when the Mass Market Design Profile is invoked. All other title pages are ignored.

Design Profile Blocks

The next tagging pattern shows the same effect created with a single title page, and multiple Design Profile blocks instead of separate sections. There is no Design Profile selector in the section, instead it is in separate title blocks.

<div class="frontmatter-rw BookTitlePage-rw">
  <div class="layout-rw dp-HardCover-rw">
    <div class="book-title-block-rw">
        <h1>Book Title</h1>
        <p class="title-sub-rw">Book Sub-title</p>
        <p class="title-author-rw">Author's name</p>
        <p class="title-other-rw">New Condensed Edition</p>
    </div>
  </div>
  <div class="layout-rw dp-MassMarket-rw">
    <div class="book-title-block-rw">
        <h1>Book Title</h1>
        <p class="title-sub-rw">Book Sub-title</p>
        <p class="title-author-rw">Author's name</p>
        <p class="title-other-rw">New Condensed Edition</p>
    </div>
  </div>
  <div class="layout-rw dp-ePub1-rw">
    <div class="book-title-block-rw">
        <h1>Book Title</h1>
        <p class="title-sub-rw">Book Sub-title</p>
        <p class="title-author-rw">Author's name</p>
        <p class="title-other-rw">With 20 minutes of Author interviews and much more</p>
    </div>
  </div>
</div>

The power of this strategy is immediately obvious. Any block can be wrapped with a Design Profile block to allow different sections to be automatically incorporated into any Design Profile edition and different content blocks to be included anywhere, only in a Design Profile generated edition of a book.

The advantage of design profiles is they can be added to the FX at any time, it does not have to be done at the time of production of the first edition. For example the Hard Cover edition is released today; the Paper Back edition in three months; and the Mass Market edition in nine months. Adding the design profiles for the editions can be done in syncronization with real marketing schedules.

Layout—Width

FX defines a set of percentage widths as the default options. These are exemplars and can be modified or extended for any general template or specific document template.

Width can be applied to any appropriate block, normally media-rw blocks, or text blocks such as pull-quote-rw, epigraph-rw and epigraph-verse-rw.

The width layout selector is acted on only be reading systems that correctly handle CSS width:xxx%; and margin:auto; properties.

<div class="body-rw Chapter-rw">
    <p> .... </p>
    <div class="media-rw illustration-rw width-50-rw">
        <div class="pc-rw">
            <img src="/path/image.png" alt="descriptive accessibility text" />
        <p class="source-rw">Getty images. All rights reserved</p>
        <p class="caption-rw">Illus.<span class="variable-rw">23</span>An illustration of something interesting</p>
    </div>
   <p> .... </p>
</div>

Layout—Float Galley

Galley floats can be used in all types of content, page floats require a paginated presentation context and are only suitable at this stage for print. They probably do not work particularly well for fixed-layout ePub.

Layout—Float Page/Column

Page floats can be used in print content or if a rendering engine can handle pagination. Page floats require a paginated presentation context and are only suitable at this stage of technology development for print. They probably do not work particularly well for fixed-layout ePub. Page floats include floating to the top or bottom of a page or column, or a next page.

Layout—Columns

Columns are an important layout tool for a lot of content. Articles in magazines and journals and text-books all use them as production cost saving devices.

Layout—Control

FX has a specific "casual" layout control block that can be wrapped around any other block to give it mobility in presentation