Web Platform Team Blog

Adobe

decor

Making the web awesome

Pagination Templates in CSS

One of the ways that we expect CSS Regions to be used is in on-screen paginated presentations. Web pages are usually presented in a ‘continuous’ fashion navigated with a scrollbar. A ‘paginated’ presentation separates the content into pages navigated with arrow keys, buttons or a swipe gesture. One way to achieve a paginated presentation is to create a CSS Region for each page and flow content through the resulting region chain.

While this can be done in JavaScript using the object model built into CSS Regions, it would be even better if there was a declarative way of creating pages and region boxes in CSS. So we have produced an unofficial draft of CSS Pagination Templates that describes how this might be done completely in CSS. In addition to the simple case of one CSS Region per page, it also describes how to lay out several boxes in a page design and assign content to the boxes.

This document is just a proposal meant to explain and illustrate how CSS Regions can be used as a building block for more CSS functionality. We think moving this proposal further along on the W3C recommendation track should happen later, after more progress has been made on the CSS Regions specification.

The idea behind Pagination Templates is to describe the layout of each page with boxes (or ‘slots’) that are linked to content flows. As content overflows these boxes, more pages are automatically generated with more boxes to hold the overflow content. The current proposal uses new @-rules to define the template and the boxes, and flow-into and flow-from from CSS Regions to assign content to each box. For example, some styling like this…

article {
  flow-into: article-flow
}
#timeline {
  flow-into: timeline-flow
}
#combine-articles {
  overflow-style: paged-x;
} 

@template {

  @slot left {
    width: 35%;
    float: left;
    flow-from: article-flow;
  }

  @slot time {
    width: 25%;
    float: left;
    flow-from: timeline-flow;
  } 

  @slot right {
    width: 35%;
    float: left;
    flow-from: article-flow;
  }
}

…could turn into a paginated display that interleaves sidebar content with a main story like this:

In order to see whether the ideas in the draft could work in practice, we created a proof-of-concept prototype that uses JavaScript to parse the proposed CSS additions and is built on top of the CSS Regions implementation you can find in a WebKit nightly build. The pages displayed above are from the prototype (consuming CSS based on the code above). The prototype code is available on Github with more examples of pagination template CSS from the proposal.

Please try out the prototype and/or read through the proposal and let us know what you think!

3 Comments

  1. June 02, 2012 at 12:35 am, Peter Gasston said:

    Looks interesting. Haven’t time to go into the syntax in detail, but certainly seems to make sense at first glance. I do like the way it works with the GCPM module syntax. http://dev.w3.org/csswg/css3-gcpm/

  2. August 10, 2012 at 10:48 am, Juh said:

    Sounds very familiar:

    http://dev.opera.com/articles/view/opera-reader-a-new-way-to-read-the-web/

    • August 10, 2012 at 10:56 am, stearns said:

      Yes, these are both pagination systems based on CSS. But while the Opera Reader proposal is limited to paginating a single contiguous flow, this proposal allows multiple flows to be arranged in multiple, selectable templates.