4 ms·

CSS3 regions: Rich page layout with HTML and CSS3

105 points by ryannielsen 15y ago

djackson 15y ago
yawn It's been done. http://textaligncentaur.com/ http://textaligncentaur.com/
- token78 15y ago
  So you think there's no place for a solution that doesn't require JavaScript?
  - d2zo 15y ago
    What if he does? Would it be such a bad thing? V8 Javascript isn't slow.
    - bzbarsky 15y ago
      Yes, but think printing or other media where Javascript isn't allowed to run at all.
- Groxx 15y ago
  >CANNOT CENTAUR TEXT: NEEDS MORE LETTERS It could really use scaling.
macrael 15y ago
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 15y ago
  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 15y ago
    How would you do this yourself? By using javascript?
    - trebor 15y ago
      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.
  - Robin_Message 15y ago
    If all you want is region layout, try http://robinmessage.github.com/regionjs/ http://robinmessage.github.com/regionjs/ I didn't follow the CSS format of the Adobe proposal, but that code will layout columns nicely.
- seanalltogether 15y ago
  I can see what you mean, but I can also see why Adobe chose this path. A pure CSS solution may offer the ability to simply define an array of boxes for the content to flow through. On the other hand the css box model requires html elements in the hierarchy to attach to, in order to manage the cascading aspect of css.
  - 15y ago
tsunamifury 15y ago
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 15y ago
  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.
  - token78 15y ago
    Agreed. The column and optimal line length conventions of print weren't arrived at through whimsy, but rather a centuries of experimentation in improving readability. Obviously screen is a very different medium, with it's own unique considerations but optimal line length is just as important a readability issue as ever.
  - re 15y ago
    > 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 15y ago
      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.
tsunamifury 15y ago
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.
unfletch 15y ago
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/ 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 http://www.quirksmode.org/css/multicolumn.html

105 points by ryannielsen 15y ago

djackson 15y ago

yawn It's been done. http://textaligncentaur.com/ http://textaligncentaur.com/

token78 15y ago
So you think there's no place for a solution that doesn't require JavaScript?
- d2zo 15y ago
  What if he does? Would it be such a bad thing? V8 Javascript isn't slow.
  - bzbarsky 15y ago
    Yes, but think printing or other media where Javascript isn't allowed to run at all.
Groxx 15y ago
>CANNOT CENTAUR TEXT: NEEDS MORE LETTERS It could really use scaling.

macrael 15y ago

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 15y ago
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 15y ago
  How would you do this yourself? By using javascript?
  - trebor 15y ago
    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.
- Robin_Message 15y ago
  If all you want is region layout, try http://robinmessage.github.com/regionjs/ http://robinmessage.github.com/regionjs/ I didn't follow the CSS format of the Adobe proposal, but that code will layout columns nicely.
seanalltogether 15y ago
I can see what you mean, but I can also see why Adobe chose this path. A pure CSS solution may offer the ability to simply define an array of boxes for the content to flow through. On the other hand the css box model requires html elements in the hierarchy to attach to, in order to manage the cascading aspect of css.
- 15y ago

tsunamifury 15y ago

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 15y ago
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.
- token78 15y ago
  Agreed. The column and optimal line length conventions of print weren't arrived at through whimsy, but rather a centuries of experimentation in improving readability. Obviously screen is a very different medium, with it's own unique considerations but optimal line length is just as important a readability issue as ever.
- re 15y ago
  > 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 15y ago
    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.

tsunamifury 15y ago

unfletch 15y ago

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/ 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 http://www.quirksmode.org/css/multicolumn.html