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.

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.
  2. 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:

<metadata>
   <meta property="rendition:layout">pre-paginated</meta>
   …
</metadata>

If a document is reflowable, it can be overridden using the rendition:layout-reflowable property on its spine item reference:

<spine>
   …
   <itemref ref="p211"/>
   <itemref ref="index" property="rendition:layout-reflowable"/>
</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:

<metadata>
   <meta property="rendition:layout">reflowable</meta>
   …
</metadata>

The fixed layout pages then override this setting using the rendition:layout-pre-paginated value on their relevant spine item references:

<spine>
   …
   <itemref ref="c01"/>
   <itemref ref="plate-01" property="rendition:layout-pre-paginated"/>
   <itemref ref="plate-02" property="rendition:layout-pre-paginated"/>
   <itemref ref="c02"/>
   …
</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 viewport declaration in the HTML header.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <title>Page 1</title>
      <meta name="viewport" content="height=1200,width=800"/>
      …
   </head>
   …
</html>

For SVG layouts, the height and width of the page is specified in pixels using the viewBox attribute.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 1200">
   …
</svg>

Display Metadata

EPUB 3 provides the following metadata properties to control the layout and appearance of fixed-layout pages:

rendition:orientation

The rendition:orientation property specifies the author's preferred orientation for displaying the fixed-layout page(s).

The value can be one of portrait, landscape, or auto for no preference.

The property can be declared globally for all pages using a meta tag:

<meta property="rendition:orientation">landscape</meta>

Or can be set for specific pages in the spine using the properties attribute:

<itemref idref="pg22" properties="rendition:orientation-portrait"
rendition:spread

The rendition:spread property specifies the author's preference for when a reading should display the fixed-layout page(s) in a synthetic spread (i.e., side-by-side in two-page layout).

The value can be one of landscape (only when the device is held in landscape orientation), both (when the device is in either landscape or portrait orientation), auto (no preference), or none.

The property can be declared globally for all pages using a meta tag:

<meta property="rendition:spread">landscape</meta>

Or can be set for specific pages in the spine using the properties attribute:

<itemref idref="pg124" properties="rendition:spread-both"/>
rendition:page-spread-left, -right and -center

The rendition:page-spread-* properties specify the author's preference for which slot in a two-page spread the reading should display the fixed-layout page.

Unlike the right- and left-hand properties, page-spread-center property is used to indicate that only a single, centered slot should be used to display the page.

The page-spread properties can only be set for specific pages in the spine using the properties attribute:

<itemref idref="pg2" properties="rendition:page-spread-left"/>
<itemref idref="pg3" properties="rendition:page-spread-right"/>

Accessibility

Fixed-layout publications present a number of challenges for accessibility. These include:

The degree of accessibility that can be achieved depends heavily on a combination of the type of layout used and the complexity of the content. It is likely going to be easier to make a simple children's book accessible, for example, than it is to make a complex textbook. Often, fixed-layout content will only be accessible if an alternative serialization is provided.

Note

WCAG 2.1 introduces a new reflowable success criterion for level AA conformance, which will make it difficult for most fixed layout publications to conform to that standard.

This section of the knowledge base explores techniques for improving the accessibility of fixed-layout publications, but it is generally recommended to create reflowable content when a publication has to be broadly accessible.

Related Links

  1. EPUB 3 — Fixed layouts
  2. EPUB 3 — Package rendering vocabulary