W3C home > Mailing lists > Public > www-style@w3.org > May 2009

[css3-multicol] improving the behaviour of floats

From: Christian Hujer <cher@riedquat.de>
Date: Sun, 17 May 2009 15:59:52 +0200
To: www-style@w3.org
Message-Id: <200905171559.57921.cher@riedquat.de>
Hello community,

when playing around with the proprietary -moz-column* implementations of 
[CSS3COL] I experienced behaviour of columns regarding floats which I did not 

Situation / Reference Example (uses CSS3 + an ECMAScript to 
add -moz*-properties for Gecko):
<http://www.riedquat.de/blog/2009-03-14-01> features multi column layout and 
floating images in a layout with CSS-based "frames". Seamonkey or Firefox 
render two columns and, depending on the version, either many columns (two 
visible) and horizontal scrollbar or two columns and vertical scrollbar.

Issue 1: Overflow - add columns to the right or to the bottom?
What is correct in that case, overflow additional columns to the right or 
overflow the height of columns to the bottom?
From [CSS3COL] "9. Overflow and multi-column elements" - "A constrained 
column-height. [...]" I conclude that it is overflow additional columns to 
the right.
I wish [CSS3COL] would give me a hint on how to control the overflow in a way 
that in that particular case (container with overflow:scroll) - is it 
overflow-y:scroll; + overflow-x:auto; or something else?

Issue 2: Overflow of floats
From [CSS3COL] "9. Overflow and multi-column elements" I conclude, that a 
float block that is exceeding the bottom of a column will overflow that 
column. I see no hint that a page-break-inside property will prevent the 
float from overflowing the column and move the float to the next column 
instead. Does it?

I think this is an experience for authors and users which could improve. For 
illustrative and decorative floats, the position in the document usually is a 
hint for the best possible position, but not a dogma. As an author, I would 
like to have a way of specifying to the user agent, that my float position 
was not dogmatic but it may choose an alternative position close to the 
original position.
Alternatives might be:
* Align the float with the top of the next column.
* Move the block that contains the float to the next column.
* Align the float with the bottom of this column.

I would like to see a possibility to specify a handling of the float block 
similar to that of [CSS3GCPM].

Improving flow:
Ideally I would be able to specify that my image should not be cropped or 
clipped or so. I would like to be able to include images around which text 
flows and which can span more than 1 column, ideally either with a size that 
I specify or a number of columns which I wish they could span. Spanning 
multiple columns should be done by allowing fractions and percentages in 
column-span. Note that the gap must be taken into account, which means that 
width:150% is not the same as column-span:150%. I suggest floor(column-span + 
left) as formula. That way, a left-aligned column-span of 150% would mean 
that the width is 1.5 * column-width + 1 * gap-width, a left-aligned 
column-span of 225% would mean that the width is 2.25 * column-width + 2 * 
gap-width. A left:50% column-span of 100% would mean 1 * column-width + 1 * 
gap-width. This probably is exactly what authors would want in that case.

Improving positioning:
When I place a float object (e.g. image) in multi-column text, the position 
inherited from the document probably is nothing more than the "suggestion for 
the best case in possible". Of course, the user agent should not deviate from 
that without being instructed to do so.
Such an instruction could be made similar to [CSS3GCPM]. I do not yet have 
further ideas for that, though.
Maybe "page-break-inside:avoid;" resp., if it would be 
available, "column-break-inside:avoid;" for a float-element would force the 
float-element and maybe its container to the next column. That alone already 
could be very helpful. If that is the case, maybe the spec should be clear 
about that.

[CSS3COL] <http://www.w3.org/TR/2007/WD-css3-multicol-20070606/>
[CSS3GCPM] <http://www.w3.org/TR/2006/WD-css3-gcpm-20060919/#page-based>

Kind regards
 .  Christian Hujer   mailto:cher@riedquat.de  http://www.riedquat.de/
..: PGP Fingerprint: 09EB 64CC 578F 5DFD 2FD5 36E5 072B 32FE 391B C25A
Random fortune:
In the force if Yoda's so strong, construct a sentence with words in
the proper order then why can't he?

Received on Sunday, 17 May 2009 14:53:02 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:26 UTC