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 usingimages 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:
HTML-based layouts — the HTML page is given a set height and width and content is positioned within the area.
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:
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:
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.
Layouts
Creation
1. <metadata>
2. <meta property="rendition:layout">pre-paginated</meta>
3. …
4. </metadata>
1. <spine>
2. …
3. <itemref ref="p211"/>
4. <itemref ref="index" property="rendition:layout-reflowable"/>
5. </spine>
1. <metadata>
2. <meta property="rendition:layout">reflowable</meta>
3. …
4. </metadata>
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
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>