CSS for designers

Wouldn’t it be great to have text flow into multiple boxes? Michael Pick, and just about every other designer on the planet, dreams of that day. And it just might happen, just not in the way designers would like. The W3C, however, maybe walking strait into a momentous cock-up. They want to do this by generating columns in a single box, what an annoying thing to do.

Why would I say that? Well, the W3C’s working draft on multicolumn boxes looks like a table. And we designers want to be set free from anything table like! Now don’t get me wrong the draft provides for a great solution, it requires no extra HTML markup and could be of great benefit to many a news site. There is just one problem.
This approach doesn’t allow for control over the text flow, specifically its direction. Okay we can ‘span’ an element, like a table cell but we can’t say whether the flow should continue under the ‘spaned’ element or next to it like the W3C column span example shows.

James Craig suggests using pseudo-classes, it, like the W3C draft, allows for normal HTML markup. The results however could be difficult to predict. Were will the generated element end up? Michael Pick’s solution, then, has it’s good points but you’re left with a tag that may or may not be filled with content. Also your markup contains an empty tag, and the last thing we need is more markup.

So why not mix pseudo-classes and multicolumn boxes?
If a box has a column-count property set it could then use pseudo-classes to access these columns, as if these where box elements in their own right. I’m already thinking of using position, z-index and other CSS goodies This way you could drop the column-gap and column-rule property. I mean, what’s wrong with good ol’ padding and border?
For example:
div.article {
column-count: auto;
min-height: 150px;
width: 300px;
} div.article IMG {
float: mid-column top;
} div.article p.next {
column-count: continue;
} div.article:column {
margin-right: 10px;
max-width: 150px;
} div.article:last-column {
margin-left: 40px;
padding-top: 20px;
max-width:50px;
}

< div class=“article”>
  <img src=“here” />
  <p> Lorem ipsum dolor sit amet, ... </p>
  <p class=“next”>some more text</p>
</div>

This, as you can see, allows for more flexibility using standard markup.
The ‘column-count:’ property with value ‘continue’ can be used to have the text flow into the next column, in this case the column with a maximum width of 50 pixels. Possibly we could use overflow to direct the flow:
div.article p.next {
column-count: continue;
overflow: text(div.article:last-column);
}

The overflow: text(); could contain any selector allowing text to flow into any other box. Like so:
div.article p.next {
column-count: break;
overflow: text(div.footer);
}

Well that’s enough from me. And if you want to let me know what you really think, just drop me a line.

—————-
Addendum (08-14-2003 / 23.40h):
My references to James Craig’s and Michael’s idea’s were not, as some have suggested, entirely fair. I, in all honesty, agree. Suggesting that their assumptions or proposals are flawed was not the right message to send. I myself would love to see these capabilities added to CSS3. And in fact the article in the end supports these ideas. I personally do believe that the W3C has a very good draft and that, with these idea’s, could be taken to another level. One that designers and clientside coders would love to see implemented.

Next entry: Rolling Thunder: blogging the Segway?
Previous entry: For all browsers, except for…