CSS3 Multiple Columns cut off italic text

Question

My example: http://jsfiddle.net/zzhT3/ (look at letter "p", please),

Unfortunately, when I use multiple-columns, webkit cuts characters written with italic font (if they go beyond of the boundaries of the column). Is this normal? Or is it possible to fix it? Thanks.

Html:

<div>
pony pony pony pony...
</div>

Css:

div{    
    -webkit-column-width: 48px; 
    -webkit-column-gap: 10px; 
    font-style: italic;  
    font-family: 'Helvetica Neue';
}

Osmium USA · Answer 1 · 2013-07-18T19:59:44.197

0

http://css-tricks.com/forums/discussion/18319/parts-of-italicscript-text-being-cut-off-at-start-of-line/p1

This is obviously a problem with css in itself. I wonder if any of the Google Open Web Fonts would do this, seeing as they're all web optimized.

Therefore you may want to consider using a multiple column div layout (divs inside of a div) instead of using -webkit rules. They're cross-browser, and I think divs are more flexible in terms of what you can do with them.

edited Jul 18 '13 at 19:59

answered Jul 18 '13 at 19:11

Osmium USA

1,751
19
37

Floating/inlining divs is not even close to the same thing as using the Multi-column module. – cimmanon Jul 18 '13 at 19:53
I suggested an alternative. I did not say they were similar. – Osmium USA Jul 18 '13 at 19:59

CSS3 Multiple Columns cut off italic text

1 Answers1