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

This message is a followup to discussions on this list in 2013 when
page floats, column floats, and float-defer-* properties were
discussed. Without implementations, it's been hard to make progress since. 

Therefore, I'm happy to report that we now have a fantastic
implementation in Prince 14, which was released today. 

Here are guides to the features:

  https://www.princexml.com/howcome/2021/guides/float/

Cheers,

Håkon Wium Lie     haakon@wiumlie.no    www.wiumlie.no     +47 90192217

On 28 Feb 2013, I wrote:

 > 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://www.wiumlie.no/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://www.wiumlie.no/2013/reader/news/i1prefix.html
 > 
 > The motivational real-world layout example for the first document is here:
 > 
 >   http://www.wiumlie.no/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] https://www.wiumlie.no/2013/gcpm/06-27#clearing-page-floats
 > [4] https://www.wiumlie.no/2013/gcpm/06-27#deferring-floats-float-defer-column-floa

(Some URLs have been updated in the above quote)

Håkon Wium Lie     haakon@wiumlie.no    www.wiumlie.no     +47 90192217

Received on Friday, 5 February 2021 19:12:52 UTC