W3C home > Mailing lists > Public > www-style@w3.org > October 2010

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

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 25 Oct 2010 11:29:04 -0700
Message-ID: <AANLkTi=eENUL=uO6FDOUiBhk=LV3ENB9-TtFN-T5b7Pc@mail.gmail.com>
To: Håkon Wium Lie <howcome@opera.com>
Cc: shelby@coolpage.com, Alex Mogilevsky <alexmog@microsoft.com>, www-style@w3.org
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:

  <footer>Copyright me, 2010</footer>

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

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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:49:49 UTC