I actually intended to make this post a year or two ago, but then kept putting it off. Now I stopped doing that, so here you are.
What is this about? I don't mean to criticize how bloated the browsers have became, even if it's true. I don't mean to write about how Firefox always shuffles UI elements around or how Chrome spies on its users. Just the very simple, most basic thing. Fonts and font rendering.
Make sure to set your browser page zoom to 100% to avoid browser scaling image distortions.
Here's a tiny piece of html for this test.
1. This is how the text used to look for every Firefox user (on Windows) and still looks on my end. First image is 1x and the second is 8x nearest-neighbour magnification so you can easily see the details. Right-click and open in a new tab or set page zoom to 100% or download the images to view them in original size.
Notice how every single entirely horizontal and vertical line is perfectly aligned with the pixel grid. Antialiasing for the round parts is there, it's unavoidable, but it doesn't turn on until some threshold font size. Smaller fonts use exact hinting and stay at 100% contrast, larger fonts smooth only the curved segments. This is Firefox until version 57 with forced Cairo font backend. This is how it did and should work.
2. With some bullshit justification typical for the Firefox team they completely removed good rendering option. This is how the text looks now for any user of a more recent Firefox (ok, I made the screenshots years ago on version ~60-80, but it could have only become worse at this point - I'm not reinstalling some new version and the test html is there for you to try if you think I'm wrong).
Small font is still the same, but larger fonts got worse. Maybe the distances between letters are now correct floating point values that were prescribed by the dumb new engine, but it cost us vertical lines which became gray and/or blurry. To say directly and honestly: this rendering sucks. The moment I saw it was the moment I stopped updating FF and reverted to the last known good version.
3. What about the browser with the largest market share, Chrome? Ok, ungoogled chromium to be precise, but in this regard it's the same thing. Well...
Like, seriously?? This is the best that google(!) could come up with? It isn't just shit smeared across the screen: the blurriness of the whole thing makes you want to claw at your face and vomit your brain through the eyesockets. How could anyone look at this hideous abomination for more than 5 seconds and think it's even remotely acceptable not to immediately wipe the software that decided to draw this from your machine?
Potential objections:
> "Just buy a high-dpi monitor, bro"
This is doubly retarded for the following reasons. First, it requires me to fork over some cash for the hardware to solve the problem that was not merely preventable in software, but rather was created in software in the first place. And second, even if your new resolution is double the old in each dimension for the same physical size, then that would only halve the width of the blurred gray edges, not eliminate them entirely. So, instead of solving the problem this provides a half-assed band-aid solution that costs money and doesn't even work. **** you very much, but I'd rather keep my old display and my old browser that work perfectly fine together.
This is a tough problem.
ReplyDeleteOn the one hand, you are correct: it's ugly and blurry.
On the other hand, snapping to the pixel grid means either text layout depends on the pixel grid or letter spacing will be uneven due to rounding error. The former makes it difficult to smoothly zoom in and out. The latter is ugly.
Yeah, smooth zoom is pretty incompatible with old-style font rendering. Only after you spelled it out I did realize why browser developers considered zoom animation an important feature - the smartphones. Once again, mobile users ruin the web for everyone else.
DeleteIt's not entirely unsalvageable, though. Of course if it were up to me, I'd just ditch the animations, but assuming you can't do that you could pre-render the text at the start and end points of the zoom animation, then scale them along the way as a composite of two layers with varying transparency, as you only care about smoothness of transition; quality in motion is irrelevant. Here's an unfinished toy example in css of how that would work. You would need a browser with good font rendering to appreciate the result.
https://sites.google.com/site/tlmcfiles/css_toy_zoom.7z
If you don't know the end point in advance it would become quite a hack. Still doesn't justify removing the engine, could have given users the choice between (good fonts + bad zoom) and (bad fonts + good zoom).
>"could have given users the choice"
Ahaha, sorry, I forgot.
That doesn't help with the layout issue, though. What do you do if changing the zoom causes a word to wrap off the end of a line?
DeleteYeah, in that case it doesn't work. Is that seriously what happens during the animated zoom? Does the browser attempt to reflow the entire webpage layout 60 times per second, or whatever your screen refresh rate is? What a gigantic waste of resources, that'd be even more horrible than I imagined.
DeleteI ducked, the keyword for the firefox is async-pan-zoom or APZ, and from my limited reading I think it's doing what you would reasonably expect it to do - immediately scale the snapshot of the viewport to provide low-latency feedback to the user doing the zoom and try to rebuild the page in the background. This doesn't require breaking the fonts, as the transition between zoomed old content and rerendered new content would have to happen regardless. Even if that weren't so, users spend way more time reading the text than zooming the text.
But it does require breaking the fonts.
DeleteWith broken font rendering, everything on the page is laid out exactly the same at every scale. The browser just multiplies by a scale factor when rasterizing.
With good font rendering, the font metrics are dependent on the pixel grid. You have to either reflow the page any time the scale changes or sometimes render text that overflows its container.
If any element on the page depends on the viewport size, then on zoom it will change its relative size and this will affect the rest of the page.
DeleteIn any case, broken fonts make life easier for developers at the cost of users' eyesight, which is exactly backwards.
But there are no elements that depend on the viewport size. When you zoom in and out, the page doesn't rearrange itself to fit the new size, it just shows you the same thing but bigger (or smaller).
Delete(Okay, Firefox has an option to make the page rearrange itself, but that only affects zoom when you use the keyboard shortcuts. The touchscreen zoom - which is independent of the keyboard shortcuts - still preserves the layout.)
Anything with "width: nn%" is such an element, for example. Open just about any page and it will not have the same layout on zoom.
DeleteSome time later: I borrowed a phone, so I get what you're talking about. Indeed, mobile browsers just scale the content on finger gesture zoom, but in doing so they creatively reinterpret parts of html/css rendering directives. They create a virtual viewport, which is larger than the screen dimensions, render everyting onto it as before and let you see parts of it through the screen window. It's a special kind of zoom, unlike the regular page zoom everyone with a desktop browser got used to, funny how you consider it the default. Wish they called it "magnifying glass mode" or something else other than zoom to avoid confusion.
Ha! You're right. I tested the keyboard zoom functions on this page, and this page has a fixed layout, so I didn't see anything get rearranged. Using it on other pages does indeed work as you describe.
DeleteBut that still leaves the touchscreen zoom (Firefox calls it "pinch to zoom"). Even on pages with flexible layouts, the page never gets rearranged. You can't have fonts that depend on the pixel grid if the page never gets rearranged.
Ignoring the security standpoint, these days it is so much better to just not update your software. It just inevitably gets worse over time from a UI/UX perspective, which is the thing most people will notice, and whatever "features" are added are rarely ever worth it.
ReplyDeleteI'd say it depends on the type of software. For the Big Corps products, sure. For the "by the people for the people" programs, not really. 7zip, ClassicShell, Notepad++, PuTTY, qBittorrent - there is nothing wrong with them.
DeleteActually the bad font rendering blamed to Windows itself, if you're using Linux with KDE, every browser's font rendering results are the same.
ReplyDeleteBefore Firefox 69.0, you could switch backend to cairo in order to using Mactype optimize the font rendering.
For Chromium based browser, seems only Cent Browser could disable DirectWrite.
Yeah, and under windows you can disable font antialias in the windows performance settings
DeleteI sometimes set chrome to 90% for certain sites so I can get the full content to fit my window size. Your example shows that chrome's font rendering is fubar at any zoom so I guess I'm good to carry on as usual.
ReplyDeleteDoesn't Sleipnir have fairly good font rendering?
ReplyDeleteIt could have the best font rendering in the universe, but sadly any browser without uBlock/uMatrix is unusable. Also, >Freeware.
Delete