[css3-regions] Use case for elements as regions

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
regions.

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>
<img>
<div class="story">...Some fragment...</div>
<img>
<div class="story">...Some fragment...</div>
<img>
<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.


Thanks,

Alan

[1] https://www.w3.org/Bugs/Public/show_bug.cgi?id=16858

Received on Tuesday, 1 May 2012 19:15:29 UTC