CSS Pagination Templates JavaScript Prototype

About

CSS Pagination Templates Module is a new proposal by Adobe to the W3C that brings template and pagination capabilities to HTML elements.

Pagination Templates aim to work well with CSS Regions in order to support the use case of overflowing named flow content from one page to another. Pages based on templates are generated as many times as necessary until the content of a named flow is fully rendered.

This is a prototype JavaScript implementation to give you a feel for how the code will look like and behave. Please keep in mind that this is just experimental stuff and treat it accordingly.

Requirements

The code and demos are expected to work in a WebKit nightly build.

Your browser supports these demos. Enjoy!

Demos

• Single slot template

  This demo shows the basic behavior when paginating an element using a simple template.

• Implicit template

  This demo highlights that the last template defined in the stylesheet is used, in the absence of a template-set property.

• First page template

  This demo shows how you can target styling for the first page of an element using the :first pseudo-class.

• Two slots template and named flows

  This demo shows how multiple named flows (from CSS Regions) can be rendered in the same template.

• Required named flow

  This demo highlights how a template can be designated to render a specific named flow.

• Generated content

  This demo shows a basic implementation of generated content from CSS.

• Vertical pages

  This demo shows the vertical direction of pages with overflow-style: paged-y.

• "The Regional" Demo - the kitchen sink

  A demo using all of the proposed functionality: first page, generated content, required named flow and multi-slot templates.

• WIRED layout mockup

  A mockup of an interleaved layout from a recent issue of WIRED. A timeline flows through the gutter of the main two-column article.

License information

The code in this repository implies and respects different licenses. This is a quick overview. For details check each folder's corresponding LICENSE.md file.

The code for the prototype, located under the src/ folder, is available under the MIT license.

The samples code and content, test files and documentation, unless otherwise specified, are available under the Public Domain License.

Third party assets are licensed accordingly in their respective folders.