[gcpm] page floats, column spans, implemented & revised

In our quest for newspaper- and magazine-like layout in CSS -- both on
paper and screens -- some milestones have been reached. By combining
multicol layout with page floats, some amazingly beautiful, scalable
and responsive pages can be built. Here are examples, code examples
and screenshots:

  http://people.opera.com/howcome/2013/02-reader/

All examples are written in 10 lines of CSS code [1]. The basic trick is:

  html { overflow: paged-x }          /* turn on paging */
  article { columns: 20em }           /* turn on multicol */
  img { float: top; column-span: 2 }  /* float figures, span across columns */

There are now three implementations that support these features:
Opera's Presto engine, and Opera's Webkit implementation, and Prince.
If you have Opera 12, you can find a prefixed document here:

  http://people.opera.com/howcome/2013/reader/news/i1prefix.html

The motivational real-world layout example for the first document is here:

  http://people.opera.com/howcome/2013/reader/clippings/newspaper.jpg

It's impossible to know what the newspaper designer would have wanted in
different-sized spreads, but I think the screenshots showcase
reasonable renditions in just about any viewport size, Without using
media queries.

The GCPM editors's draft has been slightly revised based on
implementation and demo-writing experience. A few new levers have been
added to page floats:

  - it seems that specifying 'clear' on top/bottom floats is required,
    so that one can avoid stacking floats. Given this functionality
    [3], one can e.g. say that there should only be one image per
    page.

  - also, it seems that one must be able to target certain columns,
    e.g. the last or the next. E.g., the byline in the newspaper
    article appears at the top of the second column. The functionality
    is described here [4]. (Is there a better term than "defer"?)

To some extent, these new levers replace previously defined
functionality. For example, to float an image to the top corner of the
article, I use this code in the screenshotted examples:

   img { float: top-corner; column-span: 2 }

With the proposed editions, I would write:

   img { float: top; float-column-defer: last; column-span: 2 }

Which isn't quite as readable. But it opens up for putting things in more places:

   img { float: top; float-column-defer: -3; column-span: 2 }  /* negative numbers count columns backwards */

Column defers have not bee implemented yet. But they make sense, no?

Another change to the ED is that @navigation has been renamed @laout
-- it's really about where pages are laid out.

[1] And no JavaScript. CSS cod for font declarations and navbars excepted.
[2] http://dev.w3.org/csswg/css3-gcpm
[3] http://dev.w3.org/csswg/css3-gcpm/#clearing-page-floats
[4] http://dev.w3.org/csswg/css3-gcpm/#deferring-floats-float-defer-column-floa

Cheers,

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

Received on Thursday, 28 February 2013 13:49:20 UTC