Hacker News Reader

Comment by teekert | Hacker News Reader

That is the "text-shadow: 0px 0px 1px;", indeed it has a blurring effect rather than an fancy shadow effect in this case, I agree.

View on HN

I had the same question and I was perplexed why project maintainers thought it was a good idea to put a 1px blur effect on text. At first, I though they were showing badly compressed .jpg for text, which would be even more peculiar.

I thought the same thing, that there was some sort of image being displayed. Whcih had me really interested for a moment.

From what I remember, that is actually supposed to "smooth" text in some browsers. Text used to look too sharp in Chrome (haven't had this problem in a while) sometimes. I believe that was one of the "fixes!"

I think that family of ClearType bugs persisted for like 5 years on Chrome for Windows (I only noticed it fixed last fall?) so I'm not surprised people were attempting extreme fixes. The text looked really bad.

EDIT: Sibling post suggests it was fixed in 2014. I wonder what was wrong with my home laptop then, haha...

Until about 2014, Chrome didn't support ClearType on Windows, which is why text looked so awful compared to other browsers.

Mac's renderer happens to err on the side of drawing more pixels in case of ambiguity (e.g. calculation yields fractions of a pixel); this is why everything on a mac looks like its in bold with the default settings. Windows tends to err on the side of not rendering those pixels but this is configurable with ClearType.

If you choose non-ClearType (what Google did in the early days), you have chosen to have ugly text that will not look good on anything other than a CRT in the 90s.

Now, somewhat ironically, Google's text actually looks somewhat better than Edge's; Microsoft stopped using subpixel rendering (i.e. the best part of ClearType) in Metro/Windows Store Style/Modern/UWP apps years ago, while Chrome is still taking advantage of the feature.

What's the reason for this? Why wouldn't you just use ClearType all the time?

As for why Chrome didn't implement it early on, they likely just hadn't bothered to use the newer APIs/use the APIs properly.

The reason why subpixel rendering is disabled in modern/WinRT/UWP apps, as I understand it, is likely to do with rotation. Modern apps are designed for tablet use, where the display may be oriented in any particular direction. Subpixel rendering depends on knowing the layout of the pixel elements themselves (the position of the R, G, & B elements relative to the greater pixel). When rotated, the layout changes and subpixel rendering makes things look worse.

In an ideal world, subpixel rendering would be turned off only in situations where the display is rotated. It appears that at least the rendering surface for Edge does use subpixel rendering, just not UI elements, which is an improvement over no use at all.

In Firefox it shows it as an invalid rule, but you're not able to switch it off.

Fortunately, you can override it by adding, for example, `text-shadow: 0 0 0;` to <body>. I was unable to read the page before fixing this, I would strain my eyes trying to focus. (Perhaps this problem is exacerbated by "retina" screens?)

`text-shadow: 0 0 1px #bbb` looks slightly better, but nothing will look as good as letting the browser do its thing.

Reply on news.ycombinator.com