CSS Page Templates in ePUB 3.0

  • Sumo

While the ePUB 3.0 specification was finalized in IDPF on October 11, 2011, the working group continues to work on various modules that may eventually be added to the ePUB 3.0 spec. One of these is CSS Page Templates, with the current module documentation released on January 19, 2012 (you might want to view the in Chrome to see the proper markup in the document).

What Is CSS Page Templates?

According to the Abstract at the beginning of the document,

This module defines a model for template-based paginated layouts as an extension to CSS, the style sheet language for the web. Using functionality described in the specification, content can be formatted into a sequence of richly designed interactive pages, rather than being presented as a single scrolled container (as per the standard CSS formatting process for on-screen display) or as a scrolled container which has been simply split up into a sequence of pages (as per the standard CSS formatting process for printing).

While this might appear at first blush to be something similar to Fixed-Layout ePUB, it really is not as the IDPF has a separate module for EPUB 3 Fixed-Layout Documents that was just released on February 22, 2012. To further understand CSS Page Templates, it is defined in the document as:

This module describes functionality to dynamically layout a document into a sequence of pages (or “screens”). Its primary focus is interactive display environments in which the page size and user preferred font metrics are unknown at the time of document authoring and layout has to be done on the fly. This module builds on CSS 2.1 and several CSS3 modules.

Basic Processing Model

The processing model defined by this specification enables a User Agent (UA) to flow content (such as HTML) into a series of linked containers separately described by CSS page templates . The separation of content and template is prevalent in document-oriented formatting systems, and enhances content reusability, accessibility, and expressivity. This specification also defines an associated means for style property selection to be parameterized based on dynamic conditions, such as the width of the display region.

The specification consists of two parts: adaptive styling and page layout. The adaptive styling consists of

  1. Calculated Values: ‘-epubx-expr()’
  2. Defining named values: the ‘@-epubx-define’ rule
  3. Conditional styling: ‘@-epubx-when’ rule

The page layout is quite extensive, and includes:

  1. Flows, partition and page masters
  2. Compatibility At-Rule: ‘@-epubx-page-template’
  3. Assigning CSS classes to Page Template at-rules
  4. Flow overview
  5. Definition/processing model  for content eligibility rules
  6. Types of content in the flow: the ‘-epubx-flow-options’  property
  7. Flow content lifetime: the ‘-epubx-flow-linger’ property
  8. Flow content selection: the ‘-epubx-flow-priority’ property
  9. Controlling column/region/page breaking points
  10. Defining page layout: ‘@-epubx-page-master’ rule
  11. Selection
  12. Allocating the page area: the ‘@-epubx-partition’ rule
  13. Grouping the partitions: the ‘@-epubx-partition-group’ rule
  14. Conditional page master and partition usage: the ‘-epubx-enabled’ property
  15. Using page layout for a particular page: the ‘-epubx-page’ property
  16. Selecting a page master based on device dimensions: the ‘-epubx-min-page-width’ and ‘-epubx-min-page-height’ properties
  17. Selecting a page master based on content: the ‘-epubx-required’ property
  18. Using only one in a set of partitions: the ‘-epubx-conflicting-partitions’ property
  19. Using multiple partitions together: the ‘-epubx-required-partitions’ property
  20. Snapping to the line grid : the ‘-epubx-snap-height’ property
  21. Lookup range: the ‘-epubx-utilization’ property
  22. Page Layout Processing Model
  23. Expressions inside the ‘@-epubx-page-master’ rule
  24. Styling content in a partition: the ‘@-epubx-region’ rule
  25. Primary flows: the ‘@-epubx-flow’ rule
  26. Viewport control: the ‘@-epubx-viewport’ rule

What Is It For?

So if the CSS Page Templates are not for fixed-layout ePUB books, what is the module for? It appears to be primarily for building ePUB magazines. The ability to compartmentalize content in a magazine is important, and this module will allow magazine publishers the ability to create an ePUB that echoes their print work in some ways.

Is It Needed, and Is It a Good Idea?

Do publishers need this additional module as part of the ePUB 3.0 specification? It will be interesting to see where the draft goes, but one person who does not think CSS Templates is a good idea is Baldur Bjarnason. In his post “On CSS Page Templates” and its follow-up “Game over, Amazon wins,” Bjarnason tells why he thinks it is a bad idea. One of the main reasons Bjarnason feels this way is that the IDPF working group has gone outside of the CSS working group’s current work. ePUB 3.0 does not really support all of CSS 3.0, but the CSS Page Templates document goes in directions not even included in CSS 3.o. This is problematic because it potentially splits ePUB 3.0 away from standard Web best practices.
In “Game over, Amazon wins,” Bjarnason includes a response from Peter Sorotokin, the author of the CSS Page Templates document. In addition to responding to many of Bjarnason’s points, he also includes a link to a .zip file that contains some examples of how CSS Page Templates render. The two sides of the argument are worth your time to read and consider.
Ultimately, Bjarnason responds to Sorotokin with the following:

But your final point is the one I feel the most keenly. Quite a few reading system vendors are hostile to ebook designers, override the stylesheets that come with the ebooks, or otherwise make the designer’s life very difficult. I’ve never seen anything like the mess we have with ePub reading systems, even during the worst days of the browser wars.

But, if reading system vendors don’t accept that they need to follow the CSS spec’s basic rules on the cascade order, where the author declarations take precedence over both user agent and user normal declarations, then, in the immortal words of one of the marines in Aliens, it’s: “Game over, man. Game over!”

There’s no point in using CSS as a part of the base ePub spec if the implementors can’t agree on following one of its basic principles.

This hits a key point that many designers are experiencing with the Nook Color default to a setting that ignores embedded faults and the publisher’s preferences in favor of the reader’s preferences. If it continues, I fear Bjarnason is right about a race to the bottom in terms of styling content as simply as possible to avoid reading platform rendering issues.

If you create ePUBs, I encourage you to read the working document on CSS Page Templates and let the IDPF know what you think. The only way to build a good specification is if the people who will have to work with it every day have a say in how it is created.

What do you think of the CSS Page Template document? Will you use it if it become part of the specification? Do you see other problems with it?

5 Responses to “CSS Page Templates in ePUB 3.0”

  1. Nick says:

    “If it continues, I fear Bjarnason is right about a race to the bottom in terms of styling content as simply as possible to avoid reading platform rendering issues.”

    In fact, you should already be afraid since this

    “I’ve never seen anything like the mess we have with ePub reading systems, even during the worst days of the browser wars.”

    is insanely true.

    EPUB is a standard per se/by definition and that’s it. It is no standard in real life. We’re even struggling with simple styles… which are not rendering as they should do in a normal world.
    In the end, it’s no surprise Apple set up its mind to go his own way with iBooks…

    Make EPUB a trademark / label and allow vendors to use the name of they respect EPUB features / doc 100% if you want to make it a standard. Recently, french customers discovered Kobo (associated with reseller Fnac) altered EPUB files, forced their own CSS stylesheet and some JavaScript in it, and made it a KePub file. This is crazy, it must be punished. Kobo should definitely be warned that if they do that, then they will be forbidden to put “EPUB” and “EPUB logo” all over their products. They are just misleading customers and IDPF has nothing to say on this particular issue ! By not acting, the IDPF is guilty too.

    I know I’m sounding bitter but this is going out of control and we, publishers, designers and readers are suffering. Decisions must be taken sooner than later.

    “If you create ePUBs, I encourage you to read the working document on CSS Page Templates and let the IDPF know what you think. The only way to build a good specification is if the people who will have to work with it every day have a say in how it is created.”

    And to say we tried to talk with some european members of the IDPF and they just did not listen, it was more of a skirmish than a dialogue, a skirmish in which they kept saying “this is not how it works.” while dozens were claiming we would face some sort of “IE6 catastrophe” with EPUB. Actually, it’s taking place and EPUB is becoming a huge mess.

    Ass Eliza Doolitle would scream her heart out, “Come on IDPF, move your fucking arse !”

  2. Matthew says:

    Thanks for sharing your thoughts and your passion on the topic. I was somewhat concerned myself with the direction of ePUB 3.0 with the spec being approved in October and still no real adoption in the marketplace by leading ePUB retailers. I do think the actions of the IDPF over the last month or so (Readium, draft documents on fixed-layout ePUBs, Indexes, and Dictionaries/Glossaries) shows that they are committed to making sure ePUB 3.0 succeeds in the marketplace.
    I think everyone will agree that being caught between retailers who render the same ePUB file differently, different specifications from Amazon and Apple, and the difficulty of making media queries and multiple CSS files work properly on all devices is distressing. No publisher can afford to create a custom file for each retailer, that is certain.
    We are at a time when all the basic standards in digital content are in transition (HTML5, CSS3, ePUB 3.0, JavaScript 1.8), giving rise to memories of the Browser Wars. I hope that as the specs stabilize, clear standards for how ePUBs are rendered will emerge, and we will have a set of best practices to guide us as be build and distribute ePUBs.

  3. ePub errors says:

    Is there something wrong in my set up here for my html§ of my book for ePub for fixed layout? I keep getting an error when i validate about my breaks … i Have tried to search for the fault and it seems maybe there is something wrong with the xml?


    «Ragnhild», skrek Jenny til mamma. «Det er krig i landet. De har sagt det i radioen. Vi må flykte. Vi må pakke med en gang.» Mamma ble helt begravelsesalvorlig i ansiktet. Hun snudde seg mot Jenny. «Kom Jenny, bli med inn», sa mamma. «Vi må inn å høre på radioen.»

    I radioen sa de at det var kommet tyske soldater til landet vårt. De sa også at alle sammen måtte holde seg helt rolig, og det gjorde mamma. Hun satt helt musestille i den grønne stolen i stuen og stirret rett ut i luften. Da hun begynte å snakke, var stemmen hennes helt lav.

    «Tyskerne har tatt mange land i Europa, og nå vil de ha Norge også. Kom, vi må gå til frøknene Berner med en gang.» Jenny ville ikke bli med til frøknene Berner. Hun måtte skynde seg bort til Jansløkka skole for å hente barna sine, og så skulle hun hjem og pakke fordi hun ville flykte. Hun sa ikke hvor hun ville flykte.

  4. Funslinger says:

    I’m sorry, but readers’ should be allowed to adjust the formatting of ebooks to what they like to see. I despise justified margins and won’t bother to read with them. All reading devices should allow the reader to adjust whatever aspect of the formatting that they like, while allowing a setting that renders the ebook as designed by the publisher.

  5. Hello, yeah this piece of writing is truly pleasant
    and I have learned lot of things from it on the topic of blogging.