RE: [css-break] slicing content

> However, the draft goes on to say:
> 
>   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.
> 
> This text seems to contradict A/B/C by allowing break points to be added
> inside (presumably monolithic) images. The above text doens't explicitly
> allow break points inside line boxes, unless line boxes are somehow
> regarded as monolithic elements.
> 
> So, I'd like to clarify where/if break points can be added inside line boxes and
> images.
> 
> My own suggestion would be to not allow them at all. It seems wrong to
> display the upper half of a line in one column (or region, or page) and the
> lower half on the next. And I'm sure many designers/photographers would
> object to their images being sliced and diced.

Interesting test case. I agree with you here and don't think this should occur. It should break outside of the image and the line box. I opened a bug[1] against Blink for this very issue, because even with break-inside: avoid manually set on the LI they still slice and wrap the multicolumn LI even though they should adjust and avoid breaking the element like FF/IE. Even if you increase the font to a large setting[2], FF/IE continue to force a break on the LI's and overflow the line-boxes. So this may be a situation where Blink/Webkit just have a bug in their implementation of break-inside and it is bubbling over into multi-column.

[1] https://code.google.com/p/chromium/issues/detail?id=393966

[2] http://jsfiddle.net/6cVqZ/34/

Received on Saturday, 24 January 2015 23:58:31 UTC