Bottoms of droopy letters getting cut off
Reported by
mar.bala...@gmail.com,
Jan 25 2017
|
|||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Example URL:
Steps to reproduce the problem:
<html>
<head>
<style>
body {
font-size: 12px;
font-family: Roboto, "Helvetica -apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-webkit-font-smoothing: antialiased;
}
#content {
overflow: hidden;
}
#line {
line-height: 1;
}
span {
line-height: 1.2
}
</style>
</head>
<body>
<div id="content">
<span>gyj</span>
</div>
</body>
</html>
What is the expected behavior?
The entire height of the letter should be visible.
What went wrong?
The tail of the y,g,q,j is cut off on Chrome in Windows (just in Windows)
Does it occur on multiple sites: Yes
Is it a problem with a plugin? N/A
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 55.0.2883.87 Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 24.0 r0
,
Jan 25 2017
,
Jan 26 2017
,
Jan 27 2017
I can't reproduce. Could you please tell us which fonts are used to render the text? To do so, open Inspector, and select the <span> for "gyj" in the [Elements] tab. Then in [Computed] tab on the right, you will see [Rendererd Fonts] section. On my Win10, it shows "Segoe UI". Screenshots at http://output.jsbin.com/dokatez
,
Jan 27 2017
Segoe UI is the font rendered. This reproducible only when the browser zoom is at 100% (changing the zoom will display the entire letters - more or less) and when the line-height of the span is set to 1.2
,
Jan 30 2017
I still can't reproduce, but from the description, I think this is by design. Fonts may have different heights, when anti-alias was enabled, when different zoom was used, etc. Also, "system-ui" may pick different fonts depending on user settings. You set "line-height: 1.2", which means to set the line height to 120% of the font size, regardless of the used font glyph, and set "overflow: hidden", asking browsers to clip anything outside of the box. This CSS clips glyphs when user changed his system font to something different, that is taller than 120% of the font size. I recommend to use higher value, or use "normal" which extends line height automatically by the used font, or not to use "overflow: hidden". If this assessment doesn't look reasonable to you, please leave comment. I'll watch this thread.
,
Jan 31 2017
OK, that makes a lot of sense. Your recommendation was what I've went for before submitting the issue. However, that means that there's a problem with how Chrome handles this situation on OSX and different Linux distributions (I've checked on Ubuntu 16.10 and elementary OS). On those OSes, those letters are shown "correctly".
,
Jan 31 2017
OSX and Ubuntu don't have "Segoe UI", so they should use different fonts. Different fonts usually have different heights. It's not a Chrome problem, sorry. When you set "line-height" to specific value and set "overflow: hidden", you should give enough "line-height" for all fonts. In this case, "1.2" isn't enough for "Segoe UI", so only Windows is affected.
,
Jan 31 2017
You make a good point. Thanks for looking into it. |
|||||
►
Sign in to add a comment |
|||||
Comment 1 by nyerramilli@chromium.org
, Jan 25 2017