4 ms·

Chrome and Firefox sometimes display text unpleasantly

28 points by avodonosov 13y ago

jamesaguilar 13y ago
Doesn't look like that on my machine. Anything more you want to tell us about your setup?
deleted 13y ago
[deleted]
callesgg 13y ago
Looks more like three is no anti aliasing. And as James say does not look like that for me.
isomorphic 13y ago
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...
- deleted 13y ago
  [deleted]
- cheapsteak 13y ago
  Looks fine on Chrome 32 / Win 7 Here's a fiddle for the lazy: http://jsfiddle.net/garnwraly/CqW6k/show/ http://jsfiddle.net/garnwraly/CqW6k/show/
tasty_freeze 13y ago
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.
avodonosov 13y ago
FireFox 26.0, 32.0.1700.76 beta-m, Windows 7
- nrc 13y ago
  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).
  - avodonosov 13y ago
    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
    - sp332 13y ago
      Assuming you have 64-bit Windows, install this: http://www.nvidia.com/content/DriverDownload-March2009/confirmation.php?url=/Windows/332.21/332.21-notebook-win8-win7-64bit-international-whql.exe&lang=us&type=geforcem http://www.nvidia.com/content/DriverDownload-March2009/confi...
arunitc 13y ago
This bug is pending for almost a couple of years in Chrome - https://code.google.com/p/chromium/issues/detail?id=137692 https://code.google.com/p/chromium/issues/detail?id=137692 You can try opening this icon (http://fontawesome.io/icon/windows/ 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
- cbhl 13y ago
  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?
  - arunitc 13y ago
    Yes I tried it and it works fine once you enable that flag. But fonts look much thinner than what they should be
smtddr 13y ago
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 http://community.linuxmint.com/tutorial/view/29
chrismorgan 13y ago
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>
deleted 13y ago
[deleted]
zobzu 13y ago
Looks perfectly fine for me on firefox/windows.
jdkanani 13y ago
Looks perfect on chrome32/Ubuntu.
atesti 13y ago
Have you disabled ClearType in the operating system and IE ignores that setting and uses ClearType anyway, while the other two browsers don't?
- avodonosov 13y ago
  Yes, you are right, others suggested to check that too, and enabling ClearType fixed that
kijin 13y ago
Windows 7 x64 : http://i.imgur.com/fsXFgAw.png 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?
jdbernard 13y ago
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 http://i.imgur.com/fmEhGOB.png
- avodonosov 13y ago
  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.
  - piyush_soni 13y ago
    When you do that, also add the words "for me" at the end. Thanks.
    - deleted 13y ago
      [deleted]
- ojanik 13y ago
  Your screenshot exhibits exactly the same issue. You just reproduced it.
  - jdbernard 13y ago
    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 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).
brendanib 13y ago
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.
jinushaun 13y ago
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.

28 points by avodonosov 13y ago

jamesaguilar 13y ago

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

deleted 13y ago

[deleted]

callesgg 13y ago

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

isomorphic 13y ago

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...

deleted 13y ago
[deleted]
cheapsteak 13y ago
Looks fine on Chrome 32 / Win 7 Here's a fiddle for the lazy: http://jsfiddle.net/garnwraly/CqW6k/show/ http://jsfiddle.net/garnwraly/CqW6k/show/

tasty_freeze 13y ago

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.

avodonosov 13y ago

FireFox 26.0, 32.0.1700.76 beta-m, Windows 7

nrc 13y ago
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).
- avodonosov 13y ago
  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
  - sp332 13y ago
    Assuming you have 64-bit Windows, install this: http://www.nvidia.com/content/DriverDownload-March2009/confirmation.php?url=/Windows/332.21/332.21-notebook-win8-win7-64bit-international-whql.exe&lang=us&type=geforcem http://www.nvidia.com/content/DriverDownload-March2009/confi...

arunitc 13y ago

This bug is pending for almost a couple of years in Chrome - https://code.google.com/p/chromium/issues/detail?id=137692 https://code.google.com/p/chromium/issues/detail?id=137692 You can try opening this icon (http://fontawesome.io/icon/windows/ 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

cbhl 13y ago
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?
- arunitc 13y ago
  Yes I tried it and it works fine once you enable that flag. But fonts look much thinner than what they should be

smtddr 13y ago

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 http://community.linuxmint.com/tutorial/view/29

chrismorgan 13y ago

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>

deleted 13y ago

[deleted]

zobzu 13y ago

Looks perfectly fine for me on firefox/windows.

jdkanani 13y ago

Looks perfect on chrome32/Ubuntu.

atesti 13y ago

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

avodonosov 13y ago
Yes, you are right, others suggested to check that too, and enabling ClearType fixed that

kijin 13y ago

Windows 7 x64 : http://i.imgur.com/fsXFgAw.png 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?

jdbernard 13y ago

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 http://i.imgur.com/fmEhGOB.png

avodonosov 13y ago
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.
- piyush_soni 13y ago
  When you do that, also add the words "for me" at the end. Thanks.
  - deleted 13y ago
    [deleted]
ojanik 13y ago
Your screenshot exhibits exactly the same issue. You just reproduced it.
- jdbernard 13y ago
  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 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).

brendanib 13y ago

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.

jinushaun 13y ago

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.