CSS3 Multi-column Layout

[miminno]

Guys, did anyone try to do this, or thought about it? My current employer needs this feature desperately, willing to offer a compensation for whoever takes on this task.

[danfickle]

Hi @miminno What column features do you need specifically: Do you need balanced columns? Column spanned elements? Block level content inside columns or just inline text? Explicit column breaks?

And more importantly, how desperate is desperate?

[miminno]

Do you need balanced columns? - No Column spanned elements? - No Block level content inside columns or just inline text? - Yes Explicit column breaks? - Yes

Obviously the more features get implemented the better for the project as a whole. Desperate as highly desirable and anticipated.

[danfickle]

What about floats in column content?

I've read the multi column specification so I'll experiment and get back to you.

[miminno]

@danfickle Floats is a must. Thanks for your response.

[danfickle]

Note to self: I've been reading the relevant code and come up with a plan of attack.

When we encounter a column in BoxBuilder we put it in a ColumnBox which itself extends BlockBox. We get the BlockBox super to do all the heavy layout work such as floats, lines, etc into one super long column. When the super (BlockBox) method returns we have a super long column that we split up based on the y position of each recursively examined box.

For example if we desire two columns of 100px high each, everything with a y <= 100 is left alone, everything from 101 to 200 is put in column two and translated by one column width in the x direction and one column height up in the y direction, and so on.

For this to work, we have to turn off page breaking when the BlockBox does the original single column layout. Perhaps this can be done by putting the context into screen (continuous) mode or having a third "in column" mode.

Challenges:

• What to do about columns nested inside columns?

[miminno]

@danfickle From the spec point of view, w3c says:

Nested multi-column elements are allowed, but there may be implementation-specific limits.

I think WebKit will only respect the outermost block element with 'column-count'. You can probably safely follow the same rule.

[miminno]

Since there's no updates on this I assume it won't be possible any time soon?

[danfickle]

Hi @miminno At the moment I've been lazy and not done much work on the project. Fortunately, @rototor has been keeping the project going. I'm sure I'll get motivated and start working on this again, but I can't give you a schedule.

My apologies for giving you false hope on this being completed promptly, I was planning on doing it, but life intervened.

Regards, Daniel.

[danfickle]

I have just implemented CSS3 columns. At the moment columns are:

• Unbalanced - go down to the bottom of the page and then across on each page.
• For text and inline content only - float content and block content in columns is not yet debugged.
• column-count and column-gap properties are implemented. column-width is not.
• Explicit column breaks and page breaks inside a column are yet to be implemented.

Screenshot:

[asahicks]

Hi @danfickle, are there any plans to look at balanced columns so the content would always split exactly half way, regardless if it's hit the bottom of the page? Thanks

[danfickle]

@asahicks - I will try to get balanced columns working when I next work on the column code but no timeframe (other than version 1).

[lauer]

👍 for adding balanced columns. Or maybe just be able to add a fixed sized box with columns. Currently it seems always hitting the bottom of the page before going to next column.

Have tried with margin, fixed-position and others. Also note. It only works for <div> and not <section>/<article>