Chrome and Firefox sometimes display text unpleasantly | Hacker News Reader

Chrome and Firefox sometimes display text unpleasantly

avodonosov.blogspot.com

28 pointsavodonosov35 comments

I tried his code.

It renders with proper anti-aliasing in Firefox 26 and Safari 7 on Mac OS X 10.9.

Perhaps his problem has its roots in his operating system, or rather browser developers' use of that operating system? I admit to ignorance about whether browsers are doing their own font rendering or if they are handing that off to the OS...

Looks fine on Chrome 32 / Win 7

Here's a fiddle for the lazy: http://jsfiddle.net/garnwraly/CqW6k/show/

Convenient link (unfortunately not linkified):

data:text/html,<h1%20style="font-size:300%25;color:%234f81bd;font-style:italic;font-family:Times%20New%20Roman,Times,serif">WINTER%20ACTION</h1>

Have you disabled ClearType in the operating system and IE ignores that setting and uses ClearType anyway, while the other two browsers don't?

Yes, you are right, others suggested to check that too, and enabling ClearType fixed that

Doesn't look like that on my machine. Anything more you want to tell us about your setup?

Not only does it look OK in firefox for me (ff26, windows 7), but if I CTRL-+ to boost the text size, it always looks antialiased. So the supposition that it renders then scales is false.

This bug is pending for almost a couple of years in Chrome - https://code.google.com/p/chromium/issues/detail?id=137692

You can try opening this icon (http://fontawesome.io/icon/windows/) in all three browsers to test - check for the smallest size. Works fine in Firefox and IE, not in Chrome

The bug suggests that it's Windows-only, and the bug also looks like it saw some activity last month. Has someone tried the --enable-direct-write flag that's mentioned in it?

Yes I tried it and it works fine once you enable that flag. But fonts look much thinner than what they should be

Back in the day this was some kind of problem in Linux. I always had to do stuff[1] to get MSWindows fonts to the Linux OS. But I don't think anyone needs to do this anymore. Gotta know more about this person's environment.

1. http://community.linuxmint.com/tutorial/view/29

I am marking this bug as closed: unable to reproduce.

Really, though, you should do a little more testing before you try to go public like this. This code renders almost the same for me on all three browsers: http://i.imgur.com/fmEhGOB.png

OK. I am glad to hear this works for others.

I would now change the title to something like "Chrome and FireFox sometimes display text unpleasantly" but the edit link is not available.

When you do that, also add the words "for me" at the end. Thanks.

Your screenshot exhibits exactly the same issue. You just reproduced it.

Seriously? There are slight differences, but nowhere near the same extent as evidenced on OP's blog. Really, the only place I can see any difference is on the curve of the C's.

Side by side comparison: http://i.imgur.com/wYPr1rg.png

Some difference is to be expected. Google, Microsoft, and Firefox are in competition, after all. Microsoft has the advantage of controlling both the OS and the browser in this case. I would be surprised if IE did not render slightly better. As others have pointed out FF and Chrome look better on other OS's (where IE doesn't even play).

Looks perfectly fine for me on firefox/windows.

Windows 7 x64 : http://i.imgur.com/fsXFgAw.png

Chrome is a little choppy, but Firefox and IE 11 look exactly the same.

All browsers use hardware acceleration nowadays, so I'm suspecting that something is wrong with OP's graphics settings. Are you running those browsers in a VM by any chance?

I dealt with this after a user complaint last week - The "-webkit-text-stroke: 1px" hack mentioned in the Chromium thread does indeed work, but only for headings. If you use a webfont for body copy, and absolutely need cross-browser support, probably just have to fall back.

Looks perfect on chrome32/Ubuntu.

Looks more like three is no anti aliasing. And as James say does not look like that for me.

Maybe because proper font rendering trapped is behind patents? Chrome and Firefox probably rely on public system APIs. IE probably uses private APIs to render fonts. That's just my guess.

FireFox 26.0, 32.0.1700.76 beta-m, Windows 7

For Firefox at least, this is probably because you are not using DirectWrite - that in turn is probably because you are not getting D3D10 (you are probably using D3D9 or no hardware acceleration), the usual cause of this is due to out of date drivers or black-listed hardware. You can check what hardware acceleration you get in the graphics section of about:support.

If you are not getting HWA, you can try forcing it on by setting 'layers.acceleration.force-enabled' to true in about:config (I would do that in a throw away profile though because it might crash Firefox; that overrides the black list).

  Graphics

  Adapter Description	NVIDIA GeForce GT 230M
  Adapter Drivers	nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
  Adapter RAM	1024
  ClearType Parameters	DISPLAY1 [ Gamma: 2200 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 200 ] DISPLAY2 [ Gamma: 2200 Pixel Structure: RGB ClearType Level:   100 Enhanced Contrast: 200 ]
  Device ID	0x0a28
  Direct2D Enabled	Blocked for your graphics driver version. Try updating your graphics driver to version 257.21 or newer.
  DirectWrite Enabled	false (6.2.9200.16571)
  Driver Date	7-23-2009
  Driver Version	8.15.11.8644
  GPU #2 Active	false
  GPU Accelerated Windows	0/1 Basic Blocked for your graphics driver version. Try updating your graphics driver to version 257.21 or newer.
  Vendor ID	0x10de
  WebGL Renderer	Blocked for your graphics driver version. Try updating your graphics driver to version 257.21 or newer.
  windowLayerManagerRemote	false
  AzureCanvasBackend	skia
  AzureContentBackend	none
  AzureFallbackCanvasBackend	cairo
  AzureSkiaAccelerated	0

Assuming you have 64-bit Windows, install this: http://www.nvidia.com/content/DriverDownload-March2009/confi...

    Driver Date	7-23-2009

When will users learn to upgrade their drivers properly?

EDIT: For everybody who thinks this should be easy, what's the latest version of the NVIDIA drivers on Windows Update? Is it not "version 257.21 or newer"?

Yet another technical step that users should learn to do? Computers should work for users, not users for computers. When will operating system manufacturers learn to not make users think (about things they shouldn't have to care about).

As long as users don't explicitly disable windows update, I think this should work fine in the background.

To be fair, I think the better question is when will driver vendors learn to have their drivers update automatically? Checking to see if your drivers are up-to-date and installing new ones is a tedious process, and I shouldn't have to do it just to have a usable machine.

http://www.nvidia.com/object/nvidia-update.html

> I shouldn't have to do it just to have a usable machine.

The complaint isn't that Chrome and Firefox don't work.

Updated driver. The text is still rendered the same - zigzags instead of lines.

Now about:support shows

  Graphics

  Adapter Description	NVIDIA GeForce GT 230M
  Adapter Drivers	nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
  Adapter RAM	1024
  ClearType Parameters	DISPLAY1 [ Gamma: 2200 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 200 ] DISPLAY2 [ Gamma: 2200 Pixel Structure: RGB ClearType Level: 100 Enhanced Contrast: 200 ]
  Device ID	0x0a28
  Direct2D Enabled	true
  DirectWrite Enabled	true (6.2.9200.16571)
  Driver Date	12-19-2013
  Driver Version	9.18.13.3221
  GPU #2 Active	false
  GPU Accelerated Windows	1/1 Direct3D 10
  Vendor ID	0x10de
  WebGL Renderer	Google Inc. -- ANGLE (NVIDIA GeForce GT 230M Direct3D9Ex vs_3_0 ps_3_0)
  windowLayerManagerRemote	false
  AzureCanvasBackend	direct2d
  AzureContentBackend	direct2d
  AzureFallbackCanvasBackend	cairo
  AzureSkiaAccelerated	0

So, DirectWrite is on now.

A commenter in my blog suggested to ensure ClearType is enablied in Windows settings - and indeed, I found ClearType disabled. After enabling ClearType the fonts look good in FF and Chrome.

The commenter explained that "IE uses it's own version of Cleartype regardless of system settings, while Firefox and Chrome correctly adhere to your system settings."

I'm running the exact same Chrome on Windows 7. http://i.imgur.com/HTrbetQ.png Are you sure your OS ClearText settings are ok? Edit: nrc's suggestion is much more plausible :)

Looks fine with 29.0a on Windows 8 for me.

Reply on news.ycombinator.com