Collapsing inline-blocks with font-size: 0

[kennethormandy]

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.

necolas/normalize.css#343 (comment)

[kennethormandy]

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.

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]

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]

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

[kennethormandy]

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]

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]

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.