Re: [css-multicol] Overflowing floats issue

Short version: css-multicol should specify overflow in the inline 
dimension of out-of-flow content, and perhaps special-case floats.


Le 27/04/2013 22:11, François REMY a écrit :
> I know the Multi-column layout specification is a Candidate
> Recommendation already, but I think there's a paragraph missing about
> the behavior of overflowing floats.
>
> I made a simple test case and it renders*completely*  differently in
> the four browsers I tested it on (roughly the latest public beta
> releases of IE, FireFox, Chrome and Opera).
>
> You can download the rendering in those browsers here:
> http://fremycompany.com/TEMP/2013-04/testcase-multicol.float-overflow.html.pdf
>
>
> You can view the test case in your own browser here:
> http://fremycompany.com/TEMP/2013-04/testcase-multicol.float-overflow.html
>
>
> Halas, the rendering I would like to see is to be seen in none of the
> considered browsers (but IE's rendering would satisfy me; the webkit
> rendering is clearly an artifact of their "one flow, multiple clipped
> rendering" implementation). Just for the record, I would prefer the
> image to be sent to the next page and none of text after the img tag
> to be rendered on the first column. The reason I want this is to make
> sure I can draw a logical DOM split between the columns. If the image
> is sent to the next column, I think no text that follows the image
> should be visible in the column.


Hi,

I think there are two issues here. Although they look similar, I think 
they are actually completely separate for CSS specs.

First, what happens in the block direction. (Vertically in your 
example.) You’re fragmenting content into a fixed-height multicol 
container, but have a replaced element (an image) that is higher than 
even an entire column. css-break covers this, the issue would be the 
same with pages instead of columns.  I don’t think any spec 
addition/change is necessary, but please do give feedback :)

http://dev.w3.org/csswg/css-break/#possible-breaks

> The UA is not required to fragment the contents of monolithic
> elements, and may instead either slice the element's graphical
> representation as necessary to fragment it or treat its box as
> unbreakable and overflow the fragmentainer. In both cases it must
> treat the element as having ‘break-inside: avoid’, i.e. only slice or
> overflow at the fragmentainer edge if there are no possible break
> points on the fragmentainer.

In other words, Opera’s and Chrome’s rendering are acceptable. (Although 
in Opera’s case it would be a bit better to have just the image in its 
column, without any text.)


The other issue is what happens in the inline dimension. css-multicol 
has something related:

http://www.w3.org/TR/css3-multicol/#overflow-inside-multicol-elements

> Content in the normal flow that extends into column gaps (e.g., long
> words or images) is clipped in the middle of the column gap.

But "in the normal flow" does not apply to your floating image, and I 
can’t find in the spec what happens for out-of-flow content. I suppose 
it defaults to not clipping at all (which would be what Firefox does), 
but it’s worth mentioning explicitly in the spec. We might even want a 
different behavior for floats vs. abspos/fixedpos.

Cheers,
-- 
Simon Sapin

Received on Monday, 29 April 2013 06:35:53 UTC