[css3-regions][css3-exclusions] Real-world use cases and prototype implementation and samples

Hello,

In preparation of the SVG and CSS working group Face to Face meetings this
week in Hamburg, we have worked on real-world use cases for advanced
layouts and also worked on experimental implementations of several
features from the latest CSS regions and CSS exclusions and shapes drafts.

New use cases:

- http://wiki.csswg.org/spec/css3-regions/regions-print-use-cases
- http://wiki.csswg.org/ideas/css3-exclusions-print-use-cases

this is in addition to the existing use cases we put together before:

- http://wiki.csswg.org/spec/css3-regions/regions-use-cases
- http://wiki.csswg.org/ideas/css3-exclusions-use-cases

The prototype/experimental build is available at:

Pre-built binaries:
https://github.com/adobe/webkit/downloads

source access:
https://github.com/adobe/webkit/tree/may2012-f2f-prototype

CSS Regions:

The prototype lets you specify height: auto and width: auto on region
elements. It also has support for multi-column regions: for example, you
can use "columns: 2" to make a region layout the content inside it using
two column. There is also some support for region styling.

Examples:

- Basic Regions Styling (also works in WebKit nightlies):
https://github.com/adobe/web-platform/tree/master/samples/css-regions/regio
n-styling/basic.html

- Extended Regions Styling (requires experimental build):
https://github.com/adobe/web-platform/blob/master/samples/css-regions/regio
n-styling/paint-props-simple.html

- Auto height example and multi-col region (similar to the specification
intro example): 
https://github.com/adobe/web-platform/blob/may2012-f2f-prototype/samples/cs
s-regions/spec-intro-example.html

- Edge case tests for regions auto-sizing:
https://hg.csswg.org/test/file/53cd35bcf91d/contributors/adobe/incoming/css
3-regions

CSS Exclusions and Shapes:

Proof of implementability for the CSS Exclusions processing model with
support for the wrap-flow: clear property value.

Pagination Template Proposal:

In addition, we have put together an experimental shim for the page
template proposal (http://dev.w3.org/csswg/css3-page-template/):

http://adobe.github.com/web-platform/utilities/css-pagination-template/

you can also get the source for at:
https://github.com/adobe/web-platform/tree/master/utilities/css-pagination-
template

Kind regards,
Vincent Hardy and Alan Stearns

Received on Monday, 7 May 2012 15:02:19 UTC