

CSS3 regions: Rich page layout with HTML and CSS3 - ryannielsen
http://www.adobe.com/devnet/html5/articles/css3-regions.html

======
macrael
These are very real problems with current web technologies but Adobe's
solutions seem a little strange. Content flow and region styling are both
something that should be made easy to do in html and would make it easier to
design great looking websites. But, the syntax they propose is weird. They put
all the text in one div that is presumably hidden by default before being
inserted into other divs that you leave empty in your source.

I feel like some sort of pure CSS solution would be better than requiring
empty divs in the HTML, this further mixes content and presentation. (not that
HTML/CSS does a perfect job of maintaining that separation at the moment, but
I believe this proposal would be quite a departure.)

~~~
trebor
I think it's an interesting solution. I think that CSS-only styling would be
more difficult thanks to a lack of regions. This is more an "automated" way to
get the browser to lay out the text within your content DIVs.

The good thing is, you can craft a layout and put in some placeholders that
get filled with your content. The bad thing is, you probably could have done
this yourself by hand rather than by using a CSS extension. The ugly thing is
waiting for full browser support (border-radius STILL requires -webkit and
-moz!) for these solutions.

~~~
macrael
How would you do this yourself? By using javascript?

~~~
trebor
By knowing the content you could style the regions of each page individually.
This would, however, require something like a <style> element on the page to
customize the regions or a stylesheet per page.

Or by javascript. But I see this as a more challenging approach than CSS.
(Breaking a paragraph across 2 DIV elements would be a challenge.

------
tsunamifury
Am I the only one that doesn't want two column layout to come back, especially
on tablets? Two column layout is a relic of a single page layout -- something
that seems a bit pointless when you no longer need to be constrained by the
page.

~~~
macrael
I'm not sure what you mean by saying that "Two column layout is a relic of a
single page layout". Columns have a long history (newspapers come to mind)
that does not seem to be tied to single page layout.

The most important thing that columns preserve is readable line lengths. If
you want to maintain good, readable line lengths on the web, you are going to
end up with a relatively thin column and a lot of scrolling. Multiple columns
allow us to more efficiently use the visible on screen space while maintaining
readability. That seems pretty valuable to me.

~~~
re
> The most important thing that columns preserve is readable line lengths.

A single column can give you that.

Multiple columns seem to me to be fundamentally incompatible with (vertical)
scrolling. Yes, they make perfect sense when your pages are fixed-size, and
the entire page is visible at once, but when you have a single page of
potentially unlimited height, where do you break one column and go on to the
next?

~~~
macrael
I believe scrolling is not ideal. You van break your text on viewport-height
and then put as many columns on the screen as possible. This drastically
reduces the amount of scrolling required.

~~~
Robin_Message
Once you do that, why not scroll horizontally? That gives better context and
allows for non-page height scrolling better.

~~~
macrael
I've tried that but it comes out feeling kind of weird. Also, most people
don't have a pointing device that allows for horizontal scrolling. But it is
totally workable.

------
unfletch
This is definitely more ambitious, but basic multi-column text flow is already
defined in the multi-column layout module:
<http://www.w3.org/TR/css3-multicol/>

CSS columns as defined by that module have been supported by Firefox and
WebKit for some time.

Here's a good example/explanation:
<http://www.quirksmode.org/css/multicolumn.html>

------
djackson
_yawn_ It's been done.

<http://textaligncentaur.com/>

~~~
token78
So you think there's no place for a solution that doesn't require JavaScript?

~~~
d2zo
What if he does? Would it be such a bad thing? V8 Javascript isn't slow.

~~~
bzbarsky
Yes, but think printing or other media where Javascript isn't allowed to run
at all.

