4 ms·

The text is very blurry on my browser, I'm not sure if it's intended but it makes it hard to focus on what's written.

by seszett 10y ago

teekert 10y ago
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.
- odonnellryan 10y ago
  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!"
  - XaspR8d 10y ago
    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...
  - nxc18 10y ago
    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.
    - odonnellryan 10y ago
      What's the reason for this? Why wouldn't you just use ClearType all the time?
      - nxc18 10y ago
        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.
- trymas 10y ago
  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.
  - flamtap 10y ago
    I thought the same thing, that there was some sort of image being displayed. Whcih had me really interested for a moment.
- torrent-of-ions 10y ago
  In Firefox it shows it as an invalid rule, but you're not able to switch it off.
  - maggit 10y ago
    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?)
- beager 10y ago
  `text-shadow: 0 0 1px #bbb` looks slightly better, but nothing will look as good as letting the browser do its thing.
tcfunk 10y ago
I wonder if the intended effect was to create an artificial "bolding" of the text?
theden 10y ago
Hey seszett good point, I removed the blur. For context, I wrote this project a while ago and never got around to cleaning it up.

The text is very blurry on my browser, I'm not sure if it's intended but it makes it hard to focus on what's written.

by seszett 10y ago

The text is very blurry on my browser, I'm not sure if it's intended but it makes it hard to focus on what's written.

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.

odonnellryan 10y ago
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!"
- XaspR8d 10y ago
  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...
- nxc18 10y ago
  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.
  - odonnellryan 10y ago
    What's the reason for this? Why wouldn't you just use ClearType all the time?
    - nxc18 10y ago
      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.
trymas 10y ago
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.
- flamtap 10y ago
  I thought the same thing, that there was some sort of image being displayed. Whcih had me really interested for a moment.
torrent-of-ions 10y ago
In Firefox it shows it as an invalid rule, but you're not able to switch it off.
- maggit 10y ago
  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?)
beager 10y ago
`text-shadow: 0 0 1px #bbb` looks slightly better, but nothing will look as good as letting the browser do its thing.

tcfunk 10y ago

I wonder if the intended effect was to create an artificial "bolding" of the text?

theden 10y ago

Hey seszett good point, I removed the blur. For context, I wrote this project a while ago and never got around to cleaning it up.