APEX@IGP
13
ePub3 Fixed Layout Packaging
ePub3 Packaging for a fixed layout ePub Updated: 2012-11-25
Overview
ePub3 Fixed Layout (FLO) packaging is a simple set of extensions to the standard ePub reflowable package.
The hard-work in creating a fixed layout ePub is in the content design, not the assembly of the package. There are very few "tricks". Of course there are only a few fixed layout readers currently available. Hopefully this will change soon:
- iBooks - this is the most popular for retail sales of fixed layout books. They have primarily stuck to a sub-set of the IDPF specification with a tradesman-like implementation of part of the specification.
- Readium - the IDPF specification development project has handled this completely except for
- AZARDI 16/17 - the soon to be released FLO version of AZARDI attempts to be fully compliant with additional interpretation of the fixed layout properties to specifically address the textbook and learning content markets. Read about that here ⇗.
This article does not address iBooks proprietary fixed layout packaging as it now supports a reasonable sub-set of IDPF fixed-layout specification.
The Fixed Layout Options
To make it clear what can be done with the ePub3 FLO specification here are pictures of all the main viewport combinations you can create from the standard rendition:properties. You can create these for the whole book (except page-spread options which must be from the spine), or you can add them to single pages.
Note that Readium does display pages when orientation is locked as landscape or portrait but does not optimize landscape to the viewport. This is within the specification which do not say how the implementation is to be done but is impractical for real production requirements. Remember Readium is not a commercial reader project, rather an industry empowering development hot-bed and the team is doing brilliant work.
There are clear statements on which reading systems can support which properties at this time. AZARDI 16+ is due for release in less than two weeks from now (2012-11-25). Watch out for it. It is the game changer for education, training and learning content publishers.
| How to get this rendition | Appearance |
|---|---|
Landscape, No SpreadIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks In the spine (applies to single page): properties="rendition:layout-pre-paginated rendition:orientation-landscape rendition:spread-none"; Works with: Readium | AZARDI |
 |
Landscape, SpreadIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks In the spine (applies to single page): properties="rendition:layout-pre-paginated rendition:orientation-landscape rendition:spread-none"; Works with: Readium | AZARDI |
 |
Landscape Spread LeftThis can only be used in the spine on individual pages In the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks In the spine (applies to single page): properties="page-spread-left"; Works with: Readium | AZARDI |
 |
Landscape, Spread CenterThis can only be used in the spine on individual pages In the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks In the spine (applies to single page): properties="rendition:page-spread-center"; Works with: Readium | AZARDI |
 |
Landscape, Spread RightThis can only be used in the spine on individual pages In the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks In the spine (applies to single page): properties="page-spread-right"; Works with: Readium | AZARDI |
 |
Landscape, ReflowableIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks In the spine (applies to single page): properties="rendition:layout-pre-paginated"; Works with: Readium | AZARDI |
 |
Landscape, Reflowable spreadIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks In the spine (applies to single page): properties="rendition:layout-pre-paginated"; This is an optional example only and the device will be in its standard reflowable presentation mode. Works with: Readium | AZARDI |
 |
Portrait, fullIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks Optionally from the spine (applies to single page): properties="rendition:layout-pre-paginated rendition:orientation-portrait rendition:spread-none"; Works with: Readium | AZARDI |
 |
Portrait, SpreadIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI | iBooks Optionally from the spine (applies to single page): properties="rendition:layout-pre-paginated rendition:orientation-portrait rendition:spread-portrait"; Works with: Readium | AZARDI |
 |
Portrait, page leftIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI Optionally from the spine (applies to single page): properties="page-spread-right"; Works with: Readium | AZARDI |
 |
Portrait, Page CenterIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI Optionally from the spine (applies to single page): properties="rendition:page-spread-center"; Works with: Readium | AZARDI |
 |
Portrait, Page RightIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI Optionally from the spine (applies to single page): properties="page-spread-left"; Works with: Readium | AZARDI |
 |
Portrait, ReflowableIn the metadata (applies to all pages) <meta property="rendition:layout">pre-paginated</meta> Works with: Readium | AZARDI Optionally from the spine (applies to single page): properties="rendition:spread-reflowable"; Works with: Readium | AZARDI
|
 |
The Big Two Things To Do
There are two things that need to be done to transform a standard ePub3 to a Fixed Layout ePub3:
- Put the meta viewport size information into each fixed-layout page. Generally that will be every HTML page in your document.
- Get the OPF prefix, metadata and spine (if required) correct.
Meta Viewport Dimension Information
You must insert the following into the head of all section XHTML pages in your document.
<meta name="viewport" content="width=1024, height=768"/>
Here you specify the size you want the page to be for the orientation you are going to be using. 1024px and 768px sizes are just examples. For more information on page sizing see the production page size guidelines here.
Typically all pages should be the same size and orientation. That is important if you are making your FLO books for iBooks which doesn't understand different page sizes.
OPF Requirements
You Must...
There are two things that must be done in the OPF and one optional item.
Insert this prefix into the OPF XML declaration:
prefix="rendition: http://www.idpf.org/vocab/rendition/#"
This instructs a reading system that it must expect to render the book using rendition attributes for fixed layout.
Next you must put the correct combination of fixed layout metadata statements into the OPF metadata. That looks like this:
<meta property="rendition:layout">pre-paginated</meta>
<meta property="rendition:orientation">auto</meta>
<meta property="rendition:spread">auto</meta>
To understand the various options read the various presentation options given above. If rendition:layout is set to pre-paginated, most reading system will render page spreads if rendition:orientation is auto and rendition:spread is auto.
If you want to lock your presentation to an orientation you set rendition:orientation to either portrait or landscape. Don't use auto.
You can...
Assuming you are fortunate enough to be producing against the flexibility and power of AZARDI and not the small IDPF FLO subset supported by iBooks you can use spine properties to take things to the next level.
The specification states that spine properties over-ride the metadata statements. This is illustrated in the examples above plus you can see example spines properties and associated books in our ePub3 FLO test book collection. ⇗
Summary
Congratulation from an ePub Reading System victimpractioner organization to Marcus Gylling and Dave Cramer for editing the single most enabling, powerful, clearly written and publisher enabling contribution to the IDPF specification.
Precise on what it must or shouldn't do, with clear statements on where a reading system can be unique to allow individual reading systems to create new and amazing features.
Contratulations too from the victimspractioners to the contributing authors:
- Takeshi Kanai (Sony)
- Peter Sorotokin (Adobe)
- Roger Webster (Barnes & Noble)
- James Lester (Barnes & Noble)
- Brady Kroupa (Barnes & Noble)
- Garth Conboy (Google)
- Brady Duga (Google)
- MURATA Makoto (JEPA)
- Edward O’Connor (Apple)
- Luc Audrain (Hachette Livre)
- Hadrien Gardeur (Feedbooks)
This is what a specification should be for implementers. It is not a core rendering engine specification, rather it is a clear set of statements for an implementation strategy which ensures interoperability between reading systems, without inflexibility and without the desire to introduce backward-looking features that have already be rolled past by Internet standards.
One final thanks to the IDPF lead Readium team. Without their work ours would be so much harder which is why they do what they do. The Readium project is the springboard to an exciting digital content future for all publishers.
References
ePub Fixed Layout Specification ⇠⇗
AZARDI Fixed-Layout extensions ⇗
Get AZARDI and get ready for advanced Fixed Layout ⇗
IGP Fixed Layout production tutorials for IGP:Digital Publisher ⇗