Re: Issue 84030 in chromium: CSS 3 Column bug (overflow: hidden like functionality where it shouldn't)

[chro...@googlecode.com]

Comment #3 on issue 84030 by i...@harry-k.de: CSS 3 Column bug (overflow:
hidden like functionality where it shouldn't)
http://code.google.com/p/chromium/issues/detail?id=84030

I have -webkit-column-count: 2 set on a bunch of paragraphs and would like
to make a drop cap on the first letter of the first one. It is all working
great, except that Chrome seems to handle overflowing content differently
compared to other browsers.

Drop caps are usually shifted a little out of column to maintain vertical
lines. Firefox and Opera handle that just fine, while Chrome rigorously
clips any content that overflows the column. Here is a fiddle:

http://jsfiddle.net/5tX4A/4/

Opera and Firefox display it perfectly, while the drop cap is clipped in
Chrome. When removing the *-column-count properties it is displayed
correctly in Chrome as well.

I think Chrome is not in line with the spec here, which states the

“Content and column rules that extend outside column boxes at the edges of
the multi-column element are clipped according to the ‘overflow’ property.”

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

However, setting overflow: visible on the paragraph doesn’t change anything
in Chrome (works fine in Firefox/Opera).

[chro...@googlecode.com]

Comment #4 on issue 84030 by i...@harry-k.de: CSS 3 Column bug (overflow:

hidden like functionality where it shouldn't)
http://code.google.com/p/chromium/issues/detail?id=84030

I have -webkit-column-count: 2 set on a bunch of paragraphs and would like
to make a drop cap on the first letter of the first one. It is all working
great, except that Chrome seems to handle overflowing content differently
compared to other browsers.

Drop caps are usually shifted a little out of column to maintain vertical
lines. Firefox and Opera handle that just fine, while Chrome rigorously
clips any content that overflows the column. Here is a fiddle:

http://jsfiddle.net/5tX4A/4/

Opera and Firefox display it perfectly, while the drop cap is clipped in
Chrome. When removing the *-column-count properties it is displayed
correctly in Chrome as well.

I think Chrome is not in line with the spec here, which states the

following:

“Content and column rules that extend outside column boxes at the edges of
the multi-column element are clipped according to the ‘overflow’ property.”

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

However, setting overflow: visible on the paragraph doesn’t change anything
in Chrome (works fine in Firefox/Opera).

Version: 20.0.1132.47 beta

[chro...@googlecode.com]

Comment #5 on issue 84030 by graem...@gmail.com: CSS 3 Column bug

(overflow: hidden like functionality where it shouldn't)
http://code.google.com/p/chromium/issues/detail?id=84030

This seems to be due to webkit assuming that the text will always remain
with the line-height when using columns. I use position: relative to align
and top: X to align my text to a "real" baseline grid, rather than the
default line-height centered rubbish. It works really well, and columns
work perfectly except in webkit crops any overflowing text, including
descenders, on the last line, and dumps just those cropped bits to the top
of the next column! Very weird and unattractive.

Attachments:
webkit-multicol-baseline.png 28.2 KB
webkit-multicol-descender-crop.png 28.4 KB