Adobe

decor

Web Platform Team Blog

Making the web awesome

CSS Regions: One Year In

Almost a year ago, Adobe began an effort to allow high quality, magazine style content to be displayed on the Web using the Open Web Platform (HTML5, CSS). Many of the necessary features were present in CSS, but not all necessary features were there. Adobe proposed CSS Regions as a draft specification of some advanced CSS layout features and a proof-of-concept implementation based on WebKit to the CSS Working Group during a face-to-face meeting (see the minutes).

The following video provides a short introduction to the CSS Regions features and you can read more in this article posted last year.

At the time what we called CSS Regions included a fairly large set of features. Since then, we’ve taken this initial set of features through the first steps of the standardization process at the W3C. And we’ve made progress moving our demo code into WebKit proper. This blog post reviews what has happened in the last year and discusses our plans for the next few months.

CSS WG efforts

Separating features into modules

The first thing we found was that separating out some of the proposed features into smaller, more focused modules was easier to edit and seemed preferred by the CSS WG. So we separated the CSS Regions features from the CSS Exclusions features and produced two new specifications. In addition, we found that some of the issues around breaking content into Regions are also relevant to CSS Multicolumn Layout and CSS Paged Media. So these common issues have been placed in a new module called CSS Fragmentation.

To summarize, the original proposed features are now found in these three modules:

  • CSS Regions includes named flows and region chains that allow for complex, magazine-style layouts.
  • CSS Exclusions defines ways to flow inline content around and inside shapes that are either defined in CSS or extracted from content.
  • CSS Fragmentation defines how content breaks between pages, columns or regions.
Illustrates how content flows between three regions

CSS Regions: flowing content across multiple areas

Text content flowing inside custom shapes.

CSS Exclusions: Text content flowing inside custom shapes.

Text flowing around custom shapes

CSS Exclusions: Text flowing around custom shapes.

Working with co-editors

One of the greatest things that happened with this effort is the partnerships that built around this proposal. For example, Microsoft has worked as a co-editor for both CSS Regions and CSS Exclusions. In addition, they have taken the lead on the CSS Fragmentation work which they co-edit with Mozilla. We find working with co-editors extremely valuable because it improves the specification editing process and the preparation for the working group meetings and conference calls. For example, we work with the co-editors to keep the list of specification issues on CSS Regions up-to-date.

Of course, it is not just the editors who contribute to the specification, as the list of people in the acknowledgment section attests.

Integrating comments

Both CSS Regions and CSS Exclusions have gone through many rounds of comments and improvements. Most of the feedback we’ve received has come from the www-style mailing list where all CSS specifications are discussed (people who want to comment on these specification drafts prefix their emails with “[css3-regions]” or “[css3-exclusions]“). We have also made extensive use of the CSS WG wiki and Bugzilla data base for working through and documenting proposed changes.

At TPAC 2011, the CSS working group had a discussion about the scope of regions and exclusions. The questions raised were about whether or not these modules had enough features to stand by themselves, or if more features were needed. In particular, some issues were seen as problematic:

  • could regions be generated automatically to accommodate for more content or is it required for users to create regions before content is flowed (using scripts on declarative HMTL elements)?
  • could regions automatically adapt to their content in the block direction (height for latin text)?
  • is the model for exclusions creating circular dependencies? Should the exclusions model be clarified?

This led to an agreement at the follow-on CSS WG meeting in February (Paris) to:

  • create a page template proposal to show how regions can be automatically created and used for pagination purposes.
  • work on a proposed solution for height:auto region sizing.
  • clarify the model for CSS Exclusions for each of the CSS positioning schemes.

Implementation update

In addition to the standards work above, we have been busy implementing these features in WebKit. Microsoft has also been implementing these features in IE10. While there has been a lot of progress (in both browser engines) these features are still cutting-edge and are protected both by vendor prefixes and run-time flags. Also, we are still working on interoperability between the WebKit version and IE. So while you can turn on CSS Regions in canary builds of Chrome, nightly builds of Safari, or try things out in the IE 10 Preview, don’t rely on what’s currently available for production yet: the syntax and feature set is still being discussed in the CSS Working Group. But it is a great time to start experimenting with the feature as Paul Irish did recently.

While Adobe had been using its own private branch of WebKit for a while, we are now contributing upstream to the main branch which has been new for us. We decided to start with CSS Regions and learn how to work properly with the WebKit community of coders and testers. By now we have almost all of the current working draft of CSS Regions implemented, and have started adding parsing code for CSS Exclusions.

Summary of where you can use CSS Regions today:

  • Canary: CSS Regions implemented but disabled by default
  • Chrome 19: CSS Regions implemented but disabled by default
  • Chrome 17, 18: CSS Regions implemented and enabled by default
  • WebKit Nightlies: CSS Regions implemented and enabled by default
  • IE 10 Developer Preview: Implemented and enabled by default

Note that in Canary or Chrome, you can use the about://flags url to list all the optional features and turn regions support on or off (you need to restart the browser for the change to take effect).

Finally, we were very happy to see that Mozilla has added magazine-style layouts (and saying they may implement CSS Regions and CSS Exclusions) to their roadmap.

Next Steps

As new working drafts are officially published we will be updating the implementation to match. So what is going to change in upcoming working drafts? The next CSS WG meeting is in May, and we plan on having the following done in time for that meeting:

  • Resolve all of the current issues logged for CSS Regions (or document competing proposals if the WG can’t resolve).
  • Solve height:auto for regions. We have a proposal that we’re discussing with our co-editors and David Hyatt (the main contributor in the area of CSS layout in the WebKit project – David has been very helpful in our efforts to get started with WebKit: providing architecture and design guidance, implementing some parts himself and reviewing patches we submitted), and we are working on code to validate the proposal.
  • work with our co-editor to improve the description of the CSS exclusions processing model and provide a specific step-by-step example.
  • Prepare a  page template proposal and prototype. The prototype will be developed in an open GitHub project. Since this will be a very early-stage proposal the first prototype will be a JavaScript library based on CSS3 Regions in WebKit.

Working with the Web community

The past year has been very enriching for our team. We have grown not only in size, but also in our ability to contribute to both the standard efforts and in the WebKit project.

Our goal with this effort is to help move the web forward, and to improve the CSS layout features available to content authors and web developers.

Having a specification subjected to the scrutiny of a group of experts and the community at large has been a healthy exercise. This process raises the hard questions and in the end makes the proposals better. We are also very intent on running our specification efforts and our implementation efforts in parallel, because we feel it improves the quality of the specifications as they have to sustain the test of implementability. We also want to work on the specification test effort early. We have not done as much as we would like there (even though we have started and have contributed to the CSS test suite), but we are planning to ramp up. Finally, we also want to continue building demos and proof of concepts to demonstrate the use of the new features we propose. Doing so provides a great test bed for both the usability of the specification and the quality of the implementation work.

So looking back over the past year of working on CSS Regions, it has been a fun road to drive. We are thankful for the feedback we have received from the community and our partners (in particular our co-editors) and we are thankful for the WebKit community support. We will post updates on these efforts after the next CSS Working Group face-to-face meeting in Hamburg in May 2012.

Vincent Hardy & Alan Stearns
CSS Working Group Members, Adobe Systems.

16 Comments

  1. March 18, 2012 at 11:43 pm, Was macht Adobe im flash-freien Web? Magazin-Style Layouts mit CSS Regions! | Code-Inside Blog said:

    [...] als das. Nach dem “Future Post” von Google hat auch Adobe eines ihrer großen Themen im Web über einen Blogpost näher erklärt. Die Rede ist von dem W3C Working Draft zu CSS Regions. Hierbei arbeitet Adobe mit dem [...]

  2. March 20, 2012 at 11:13 am, Anthony Ricaud said:

    I don’t understand why those features are enabled in released and beta versions of Chrome (17 and 18) but not on “development” versions. Any reason?

    • March 20, 2012 at 2:43 pm, vhardy said:

      As you noted, the Chrome team had initially enabled CSS regions in Chrome 16, 17 and 18 and then decided to keep the feature under a flag like any other new feature that is making its way into the browser (e.g., the Shadow DOM or the element). So now, regions are indeed enabled by a flag which is what you seen in the Canary build or in version 19 (note that you need to restart the browser to see the flag take effect). You can provide feedback that you’d like to see the feature enabled by default by entering your comment in the page that you access with the Help -> “Report an issue…” menu selection.

  3. March 23, 2012 at 8:29 am, CSS Bleeding Edge Features : Mihai Corlan said:

    [...] Blogpost by Vincent Hardy from Adobe, one of the two editors of this spec [...]

  4. March 23, 2012 at 6:54 pm, Lars Gunther said:

    When the feature has stabilized a bit, will Adobe also contribute program code to Mozilla?

    • March 23, 2012 at 9:59 pm, vhardy said:

      We would definitely like to see regions implemented in Firefox and help as much as we can. Right now, the way we can help is by writing a solid specification and building a W3C test suite. Both of these should help all implementations (Mozilla, but also others).

      The code that we are contributing to WebKit cannot be contributed as is to Mozilla because it is highly WebKit specific, and not an isolated module that we could easily repurpose and/or contribute to another open source project.

  5. March 25, 2012 at 8:39 pm, Advanced Web Service » HTML5 roundup: magazine-style Web layouts with CSS regions said:

    [...] the support of several browser vendors. Adobe discussed the status of the feature in a recent blog post. Preliminary implementations of CSS Regions based on the standard draft are now included in WebKit [...]

  6. March 26, 2012 at 2:00 am, HTML5 roundup: magazine-style Web layouts with CSS regions | said:

    [...] the support of several browser vendors. Adobe discussed the status of the feature in a recent blog post. Preliminary implementations of CSS Regions based on the standard draft are now included in WebKit [...]

  7. March 27, 2012 at 4:38 pm, Eyup Ozturk said:

    What matters will be how easy these custom shapes will be created in web page editors.

    The editor must be WYSIWYG, the shapes must have some predetermined shapes that can be inserted to the page and then “bent” by point- and -click-and-drag. The shapes can have a rectangular border so that they can be dragged to adjust height and width the shape and must be able to put to the exact location on the page.

    It is important how there shapes will behave / blend with pictures. Will it be possible to impose these regions with a picture as background and text flowing around the shape ? Will there be additional parameters to the “insert picture” tool ( currently spaces around picture boundary can be given ) so that text will flow as defined here ? Will is be possible to select a shape to be imposed on the picture in the “insert picture” tool ?

    If these can be done, then we can talk of “magazine web” – web sites created by editors of “printed magazines”.

    Otherwise – using DreamWeaver, separate CSS files, separate JavaScript pages, separate HTML files etc. – will be very limited. We will be able to see a few images on the front pages of web sites designed by the web site designer – and it will not be used on content pages.

    Hope Adobe can add such tools.

  8. March 27, 2012 at 4:42 pm, Eyup Ozturk said:

    the moment it fixes the problems observed here, we would be talking of progress :

    http://kozmono.com/mitoloji.htm

    and here :

    http://kozmono.com/index.htm

    • March 28, 2012 at 1:50 am, vhardy said:

      Yes, our team definitely thinks about tooling scenarios and how the new functionality can be best made available to web authors. For example, the object model APIs that are part of CSS Regions are in part meant to enable tooling scenarios.

  9. April 09, 2012 at 1:47 pm, What does Adobe in the flash-free web? Magazine-Style Layouts with CSS Regions! | Code-Inside Blog International said:

    [...] a lot more. According to the “Future Post” from Google Adobe declared one of their big subjects on a Blogpost. I’m talking about the W3C Working Draft to CSS Regions. Adobe cooperates with the WebKit Team [...]

  10. April 23, 2012 at 1:31 pm, Yashpal Singla said:

    We are planning to use webkit – region in one of our web tool, which will run on chrome, will it be fine too use this css – region. Or you think it can be removed from newer version of chrome or it could be totally changed in implementation in future without supporting the existing version.

    Please advise, as our development will be dependent on that, in case your comment comes out to be negative we have to build our own custom thing supporting region.

    Looking forward to your quick response on this.

    Many thanks in advance

    • April 23, 2012 at 3:08 pm, Deepa Subramaniam said:

      This is great news! The basis of the feature is pretty stable but new functionality will be added and this will cause the API to change. I would advise against building your own regions-like layout algorithm. Instead, take advantage of CSS Regions and keep an eye on the spec in the W3C and our blog and website to be notified of major changes to the feature that may require you to update your usage of it.

  11. April 24, 2012 at 6:34 am, Yashpal Singla said:

    Hi Deepa,

    Thanks for your quick response, another thing which i want to know is that, is there any way available in javascript/jquery to fetch the overflow text in individual regions.

    My implementation also require to find the text overflown to each individual regions specified. Please let me know if there is any way to do that too

    Thanks

  12. April 24, 2012 at 8:50 pm, Is browser and tech innovation assuming an audience rather than talking to one? | Christian Heilmann said:

    [...] needed a special build of a certain browser (like the GamePad API in Firefox or Adobe’s first CSS regions proposal). This means we do expect a lot of investment from our audience for something that might change or [...]