Re: [css3-multicol] new editor's draft

On Sun, Oct 24, 2010 at 11:40 AM, Håkon Wium Lie <howcome@opera.com> wrote:
> Say, you'd like this three-column design with a copyright text at the
> bottom:
>
>    Menu    | main article | another
>    item 1  | text and so  | box with
>    item 2  | forth just   | some
>    item 3  | some words   | content
>            | you know     | over here
>
>     Copyright © 1900-2000000000000
>
> Your markup could be:
>
>  <div class=menu>..</div>
>  <div class=article>..</div>
>  <div class=box>..</div>
>  <p class=copyright>...</p>
>
> You could achieve the above with this style sheet:
>
>  body { columns: 3 }
>  div { break-after: column }
>  p.copyright { column-span: all }
>
> However, since the p.copyright element will end up in an overflow
> column the 'column-span' property will -- as per the current CR --
> not have any effect.
>
> (Now, you could argue that the use case isn't terribly interesting as
> there is no way to set different widths on the columns. But that may
> be added in the future.)

This should probably be addressed in a more general way, actually.
The copyright isn't really part of the multicol; it's only forced to
interact with the multicol rules because the <div>s don't have their
own container element to work with.

We could fix this in a few ways:

One is a generic means of creating wrapper pseudoelements (I proposed
::wrap() a while back, but didn't finish solving the issues with it).
Then you could slap the wrapper around the <div>s and just give *that*
the multicol layout.

Another is to use box-tree reorg via Template to accomplish a similar
task.  If this is a blog post, for example, which might have a
structure like:

<article>
  <h1>title</h1>
  <p>...</p>
  .
  .
  .
  <p>...</p>
  <footer>Copyright me, 2010</footer>
</article>

...then you could use CSS like this to style it:

article {
  display: template("a" \intrinsic "@" \* "c" \intrinsic);
}
article > h1 {
  position: slot(a);
}
article > footer {
  position: slot(c);
}
article::slot(@) {
  column-count: 3;
}

While I think that 'column-span' is a useful property, I think we
should keep it simple.  More complex layout concerns should be solved
by layout instead.


> Hmm. I belive Alex' concern is that a stray element far out into the
> overflow area shouldn't re-enter the multicol box and cause the layout
> to be reflowed.
>
> However, if we specify that 'column-span: all' in an overflow area
> just takes the element back in, underneath the content that has
> already been laid out, and stretches across the columns inside the
> multicol box, it seems doable. No?

What happens to content following the overflowing spanner?  Still
overflowed?  What if there's a colspanning element, some normal
content, then another colspanning element, all in the overflow area?

~TJ

Received on Monday, 25 October 2010 18:30:00 UTC