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.
The code and demos are expected to work in a WebKit nightly build.
Sorry, your browser does not support these demos.
Please use a WebKit nightly build.
This demo shows the basic behavior when paginating an element using a simple template.
This demo highlights that the last template defined in the stylesheet is used, in the absence of a template-set property.
This demo shows how you can target styling for the first page of an element using the :first pseudo-class.
This demo shows how multiple named flows (from CSS Regions) can be rendered in the same template.
This demo highlights how a template can be designated to render a specific named flow.
This demo shows a basic implementation of generated content from CSS.
This demo shows the vertical direction of pages with overflow-style: paged-y.
A demo using all of the proposed functionality: first page, generated content, required named flow and multi-slot templates.
A mockup of an interleaved layout from a recent issue of WIRED. A timeline flows through the gutter of the main two-column article.
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.