[css3-gcpm] paged presentations, page floats, paged navigation between documents

The GCPM editor's draft [1] has been revised:

  - paged presentations [2] have been revised, based on an earlier
    draft [3]
  - page floats have been revised [4], including 'column-span: <integer>'
  - paged navigation between documents [5] have been added 

>From a syntax perspective, these features are quite simple: a few new
values on 'overflow', 'float', 'column-span', and a new @-rule
(@navigation). Combined, these feature allows HTML/CSS to create
compelling paged presentation with a few lines of code. For example,
this code creates a layout commonly used in newspapers:

  html {
    overflow: paged-x;
    height: 100%;
    columns: 20em;
  }
  .figure {
    float: top-corner;
    column-span: 2;
    width: 100%;
  }

Here are screenshots from Opera's experimental implementation:

  http://people.opera.com/howcome/2011/gcpm/ss

These pages are all generated from the same HTML document. And
there's no scrollbare on the side; the user navigates from one page to
the other with gestures.

Media queries are used to create different presentations in portrait
and landscape views. The ads are done by floating them to the next
page, and spanning all columns. E.g.:

  .ad {
     float: top next-page;
     column-span: all;
     width: 100%;
     height: 100%;
  }

The @navigation rule is used to position other documents around the
current document. This way, user gestures can be used to navigate to
the. As such, the "point-and-click" metaphor of the web is extended
with "navigate-through-gestures". E.g.:

  <link rel=index href="...">
  <link rel=next href="...">

  @-o-navigation {
    nav-up: -o-link-rel(index);
    nav-right: -o-link-rel(next);
  }

I think these proposed features address some important aspects of
layout and navigation that CSS can and should address.

[1] http://dev.w3.org/csswg/css3-gcpm/
[2] http://dev.w3.org/csswg/css3-gcpm/#paged-presentations
[3] http://lists.w3.org/Archives/Public/www-style/2009Jan/0030.html
[4] http://dev.w3.org/csswg/css3-gcpm/#page-floats
[5] http://dev.w3.org/csswg/css3-gcpm/#navigation-between-pages

Feedback welcome, as always.

Cheers,

-h&kon
              Håkon Wium Lie                          CTO °þe®ª
howcome@opera.com                  http://people.opera.com/howcome

Received on Monday, 10 October 2011 23:11:08 UTC