The WHATWG Blog

Please leave your sense of logic at the door, thanks!

Archive for October, 2013

CSS Books & CSS Figures

Monday, October 14th, 2013

Today we're happy to add two more specs to the WHATWG stable, Books and Figures! These are specifications focused on CSS features. Books provides ways to turn HTML document into books, either on screen or on paper. Using Books, authors can style cross-references, footnotes, and most other things needed to present books on screen or paper. Figures are also based on traditional publishing — it provides ways to float elements with respect to columns and pages, and describes how to wrap text around them.

Printing was part of the first CSS proposal in 1994, and many of these CSS features have been in use since the first paper book written in HTML and CSS (CSS — Designing for the Web) was published in 2005. Now, a decade later, bestsellers are routinely produced with CSS. There are currently two implementations of these specifications that are able to produce books: AntennaHouse and Prince. We hope that our continued work on these specifications will help existing implementations converge, and also encourage browsers to present web content as pages. Pages can be printed, stored as PDF files, or shown on screens. Many users will prefer pages to scrollbars, and these specifications will help make it happen.

As an example of a feature from Books, consider footnotes. Turning an element into a footnote is easy:

span.footnote { float: footnote } 

This can, with a few more styles, be formatted as:

Body text, with a superscripted footnote saying '[1]' in red, and under the body, a short line delimiting the body from text in a smaller font size, with the same red '[1]' indicating the footnote.

In another example, common newspaper and magazine layouts can be achieved with just a 10-line style sheet. Here's what this could look like:

The page with five columns of body text, but with a paragraph in a larger font size spanning the first two columns to the upper left, an image with a caption spanning the last three columns at the top on the right, an image covering the second and third columns at the bottom, and a smaller image with a caption at the bottom right.

More screenshots and code examples are available.

Feedback on these specifications, like all our others, is most welcome, either on www-style, on WHATWG's mailing list, or as bugs in the bug database.

The features described by these specifications were previously published as part of a W3C CSS working group document that I wrote. Today we are moving the work to WHATWG, a W3C Community Group.

Posted in WHATWG | 6 Comments »