KB1 > Fixed Layouts > Overview

Layouts

A fixed-layout publication is one where each page has a fixed size (height and width). The content of these pages is laid out in a pixel-precise manner — elements have fixed coordinates where they are to render.
Fixed layouts are commonly created using images but can also be achieved in HTML through the use of absolute positioning with CSS. They are typically used to create comics, manga, children's story books, cookbooks and textbooks, but can be found in any material trying to reproduce pixel-precise layouts.
Insert?
EPUB supports two primary approaches to creating fixed layouts:
  1. HTML-based layouts — the HTML page is given a set height and width and content is positioned within the area.
  1. SVG-based layouts — image formats (e.g., SVG, JPEG, PNG) are used to create the content.
In some cases, these approaches are mixed. An HTML or SVG document might be used to display an image format, for example, so that alternative text and extended descriptions can also be provided.
Note
An alternative to HTML and SVG fixed layouts is to include images directly in the EPUB spine. As support for, and accessibility of, this approach is limited, this topic is only minimally covered on the images in spine page.

Creation

Package Metadata
The only difference between a primarily fixed-layout publication and one with only a few pages is in the package document metadata.
When the publication consists entirely, or predominantly, of fixed layout pages, a single global declaration of the rendition:layout property is all that is needed:
    1. <metadata>
    2.    <meta property="rendition:layout">pre-paginated</meta>
    3.    …
    4. </metadata>
If a document is reflowable, it can be overridden using the rendition:layout-reflowable property on its spine item reference:
    1. <spine>
    2.    …
    3.    <itemref ref="p211"/>
    4.    <itemref ref="index" property="rendition:layout-reflowable"/>
    5. </spine>
If only a few pages use fixed layouts, the preceding process is simply reversed. Although it is not necessary to specify a global rendition:layout property for reflowable publications (this is the default in EPUB), one can be added as follows:
    1. <metadata>
    2.    <meta property="rendition:layout">reflowable</meta>
    3.    …
    4. </metadata>
The fixed layout pages then override this setting using the rendition:layout-pre-paginatedvalue on their relevant spine item references:
    1. <spine>
    2.    …
    3.    <itemref ref="c01"/>
    4.    <itemref ref="plate-01" property="rendition:layout-pre-paginated"/>
    5.    <itemref ref="plate-02" property="rendition:layout-pre-paginated"/>
    6.    <itemref ref="c02"/>
    7.    …
    8. </spine>

Page Dimensions

The package metadata declarations only tell reading systems which pages to render as fixed layouts. It is still necessary to identify the dimensions of the page so that the reading system renders the page in an appropriately sized area.
The dimensions for fixed layout XHTML and SVG differ as each relies on the markup capabilities of its respective format.
For HTML layouts, the height and width of the page is specified in pixels using a viewportdeclaration in the HTML header.
    1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    2.    <head>
    3.       <title>Page 1</title>
    4.       <meta name="viewport" content="height=1200,width=800"/>
    5.       …
    6.    </head>