search

notofonts / noto-fonts

Noto fonts, except for CJK and emoji
http://fonts.google.com/noto
SIL Open Font License 1.1
2.46k stars 199 forks source link

Overflow issues with Noto Sans in browsers #1564

Closed robinwhittleton closed 5 years ago

robinwhittleton commented 5 years ago

I’ve hit an issue with overflow scrollbars in browsers with Noto Sans. I think it’s a font issue, but I’m happy to file browser bugs if it’s decided that it’s a rendering issue.

Font

Whatever is passed to the browser at default weight for 'Noto Sans', which I believe is NotoSans-Regular.ttf. I’ve also replicated with the version delivered through Google Fonts.

Where the font came from, and when

Installed on Mac using brew cask install font-noto-sans. Site: https://noto-website-2.storage.googleapis.com/pkgs/NotoSans-unhinted.zip Date: 2019-07-26 (preferred format)

Font Version

2.000

OS name and version

macOS 10.14.5, also tested on latest Ubuntu.

Application name and version

Chrome and Firefox, though apparently not Safari.

Issue

  1. Load https://codepen.io/anon/pen/wVzNOZ in Chrome or Firefox. This has a paragraph set to Noto Sans, and overflow-y:auto;.
  2. See that on the right side of the word Test a scrollbar appears.
  3. Expected results: no scrollbar. With no fixed height, the container should resize to match the text’s height, so no scrollbar should appear.

Screenshot

Screenshot demonstrating the scrollbar in Firefox
robinwhittleton commented 5 years ago

Replicated in Safari by setting a little smaller (but still >1) line height.

robinwhittleton commented 5 years ago

Ah, OK, not an issue with the font (and technically part of the spec in the browser). There’s a part of the font that extends below the descender line by a small amount. In this scenario with overflow that part is clipped, and a scrollbar appears allowing you to see it. The effect is present in a bunch of fonts but most obvious with hand-writing style ones, for example Zapfino. I’ll close this.