Håkon Lie's mock ups of CSS Paged Content. Pagination shifts as screen size changes

Håkon Wium Lie, Opera Software’s CTO and creator of cascading stylesheets, has proposed a new set of CSS tools that transform longer web pages into a more book-like experience, where the reader flips from page to page instead of scrolling down one long screen.

Lie’s proposal, the Generated Content for Paged Media standard, is a mouthful. But behind the awkward name lies an intriguing idea.

It’s a concept that’s gained considerable weight with the arrival of touchscreen tablets and smartphones, both of which lend themselves to very book-like reading experience. Indeed popular magazines, including Wired, all offer platform-native applications that mimic the reading experience of a book or magazine. That’s precisely what Lie wants to make possible on the web.

“The form, the presentation of content is important,” says Lie. “The turning of the page is an event, we anticipate what is on the other side, we look forward to it.” The endless scrolling of the web lacks such events, but Lie believes CSS can bring what’s good about reading in the real world to the web.

At its core, the Paged Media standard offers web developers a way to paginate content — that is, take a single webpage and break it into multiple “pages,” with each page automatically fitted to the screen size of the device you’re using. For example, this article might be three “pages” when viewed on an iPad. However, because the pagination is done with CSS and the HTML remains as it is, there’s no added load time when you flip to the next page. So it’s not a tool that can easily be abused by publishers to mine extra pageviews. It adds all the good things about multi-page layouts and none of the bad.

The Paged Media proposal isn’t just about pages, though; there are also tools defined for gestures — swiping to turn to the next page, or, at the end of an article to the next article (all built off the existing HTML rel=next/prev tags). There are also magazine-friendly layout tools, like the ability to float elements across multiple columns of text, as well as hyphenation rules and a means of styling footnotes.

If all that sounds like a very print-oriented set of tools, well, you’re right. Lie believes that the web is undergoing a fundamental shift in metaphors, one he compares to a similar shift that happened hundreds of years ago — the shift from scrolls to books.

This shift makes particular sense on tablets. The “flipping” action to turn pages on a tablet makes sense in the same way it made sense for newspapers to be pages rather than enormous scrolls. There is, after all, no reason the newspaper couldn’t be delivered just like a webpage — an enormous roll of paper that you unroll as you read. It’s not of course, because that’s not the ideal form factor for reading in the situations that people read newspapers. Nor is vertical scrolling ideal when you’re reading with a tablet. Paging is easier than scrolling on a tablet. Both are swiping gestures, but scrolling requires a controlled swipe to a selected area, whereas paging is a much less precise, and therefore easier, gesture.

Lie tells Webmonkey that he doesn’t believe the venerable scrollbar will go away, rather that the CSS Paged Media tools will offer another way to render web content. In fact, Lie thinks Paged Media would be a natural companion for CSS media queries, perhaps becoming another element of responsive design. By pairing the two, developers could nicely paginate a longer article for a magazine-style reading experience on tablets and revert to a more traditional layout for desktop browsers.

A magazine-style reading experience isn’t necessarily right for every site, but one of the markets Lie has in mind is one that’s already trying to put the magazine on your tablet — the publishing world.

Publishers are spending ever-increasing amounts of money developing and maintaining native apps across a variety of smartphone and tablet platforms. The majority of these apps are little more than content containers, niche browsers if you will. Most of them are just trying to recreate the paged layout of their print cousins. CSS Paged Media would allow that same content to be paginated the same way in any web browser, on any platform.

It’s an ambitious goal and one that won’t happen overnight, though Lie did say that very experimental support for the Paged Media standard would be available in a coming labs version of Opera 12.

More importantly, Lie’s proposal is already on the table. While he concedes there are many things to still be worked out — including how Paged Media will fit some of its layout tools alongside CSS Regions or how users will bookmark paginated content — David Hyatt, Apple’s Safari and WebKit architect, has already expressed some support on the W3C mailing list.

That’s good news — without widespread browser support Paged Media won’t be dragging the web out of the papyrus-crusted past any time soon.

See Also: