search

kennethormandy / normalize-opentype.css

Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
http://kennethormandy.com/journal/normalize-opentype-css
MIT License
791 stars 29 forks source link

Collapsing inline-blocks with font-size: 0 #6

Open kennethormandy opened 10 years ago

kennethormandy commented 10 years ago

I also tried dropping it into twitter.com via dev tools, and it broke the profile page in Chrome. We use inline blocks for the layout, and font-size:0 to collapse whitespace between elements. Looks like the font-feature-settings prevents that from happening.

https://github.com/necolas/normalize.css/issues/343#issuecomment-47190238

kennethormandy commented 10 years ago

Still can’t figure a way around this one. If -webkit-font-feature-settings is on the body tag on Twitter, it breaks the layout.

screen shot 2014-07-02 at 11 38 32

Could be something to do with kerning specifically conflicting with the inline-block and font-size: 0 “hack,” but I haven’t been able to reproduce the bug in a smaller test case yet. Also, it occurs regardless of what kern is set to.

kpeatt commented 10 years ago

Looks like it might be an edge case interaction with Screensmart fonts from H&FJ? I played around with this a bit on my cloud.typography.com dashboard and it caused some weirdness with line breaks. Couldn't reproduce it otherwise. I don't have a license for Gotham Narrow Screensmart so I can't test to say for sure but we could try it with my other licenses.

kpeatt commented 10 years ago

Ah, nevermind, this is happening if I switch out Gotham on their site for Fira as well.

kennethormandy commented 10 years ago

Thanks for taking a look, it’s entirely possible that there will be a subsequent issue with the Cloud.typography stuff.

I managed to get it down to a simplified test case on Codepen now, and I have some stuff borrowed from Twitter’s stylesheets in a branch for my next try at it.

ry5n commented 10 years ago

I took a crack at this: http://codepen.io/ry5n/pen/hnoFD

The fix I found (at least for Chrome) is to set font-feature-settings to normal along with font-size: 0 and then restore the desired Opentype settings as well as font size on the children.

kennethormandy commented 10 years ago

Thanks so much for tackling this, Ryan. That’s what I was hoping for from font-feature-settings: none. It’s only an issue in Chrome so you’ve found the fix as far as I’m concerned.