W3C home > Mailing lists > Public > www-style@w3.org > May 2012

[css3-regions] Use case for elements as regions

From: Alan Stearns <stearns@adobe.com>
Date: Tue, 1 May 2012 12:14:59 -0700
To: www-style <www-style@w3.org>
Message-ID: <CBC58443.D247%stearns@adobe.com>
Hey all,

This is in response to the issue [1] on disallowing elements to be styled
as regions. It's an interesting use case that I've been meaning to post to
this list, and I think it helps validate allowing elements to become

Take a look at http://ilovetypography.com/2012/04/06/type-camp-india/

The markup here has the article text broken up by images. The images are
sometimes related to the surrounding text, and sometimes not. It's a good
responsive design, fiddling with columns and margins to keep things
readable as the viewport width changes.

The markup looks something like this:

<div class="story">...Some fragment...</div>
<div class="story">...Some fragment...</div>
<div class="story">...Some fragment...</div>
<div class="story">...Some fragment...</div>

So they decided to choose where the fragments of the story start and end.
On a desktop screen, the breaks chosen ensure that at least part of an
image is always on-screen. But as the viewport width gets smaller the
images get placed farther and farther apart. An alternate design using a
region chain could constrain the text height so that at least part of an
image is always in view no matter what size the viewport is.

.story > * {
  flow-into: story-flow;

.story {
  flow-from: story-flow;
  max-height: 80vh;

Since the markup is already divided into divs, we get a region chain
flowing around the images without introducing any empty divs to represent
regions. The last region would need to be auto-height to contain the
remainder of the article.

I don't know if the "always keep an image in view" design is the real
intent for this particular page, but I've seen this pattern of
hand-breaking content to simulate flowing through boxes on other sites.
Creating a region chain out of these pre-existing boxes can in some cases
improve the design and leave a fallback to the hand-broken content for
browsers that don't support named flows.



[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=16858
Received on Tuesday, 1 May 2012 19:15:29 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:58 UTC