• 200724 Dec

    Dave Hyatt has recently checked in to the WebKit repository some basic support for using the ClearType text rendering system, which uses a different algorithm for subpixel anti-aliasing than the current CoreGraphics libraries do. Windows users will find that this makes text in Safari look similar to text in other web browsers and elsewhere on the system.

    To experiment with this, you need to download the latest WebKit nightly build for Windows and set Safari’s ‘WebKitFontSmoothingType’ preference to a value of ‘4’. The preferences are stored in an XML property list file in the folder /Documents and Settings/username/Application Data/Apple Computer.
    There are many caveats though, as this is clearly just the first step of a work-in-progress. At present the ClearType code path doesn’t support the opacity, text-shadow, -webkit-text-stroke, or -webkit-text-fill CSS properties, amongst other things. Let’s hope this development dampens down the recent heated debate on font rendering.

    You can skip to the end and leave a response.

  • Comments

    • 01.

      Too bad. With the CoreGraphics rendering, Windows users could finally see what “bold” is supposed to mean.

    • 02.

      […] clear yet, but WebKit on Windows now lets you render text using ClearType rather than Quartz. (Via Nick […]

    • 03.

      Is there something that prevents it from using the native font rendering? Do they have to reinvent the wheel?

    • 04.

      Cross-platform programming often makes it necessary to reinvent the wheel. A lot of the code for Safari has come from Linux to OS X and is now making its way over to Windows. You can’t use a lot of the native libraries because of this; at least not directly.

    • 05.

      While I personally prefer Safari’s built-in font rendering, it just didn’t work in the context of Windows; it was one of many elements that made the browser look like an alien element in the Windows environment.

    • 06.

      Well, for testing purposes … I think it’s definitely better to have it render pages like Safari on OSX. ClearType won’t help dealienating the app in Windows, it still looks like weird, along with iTunes and QuickTime for Windows. I think that Safari/Win is more valuable for testing purposes (iPhone, anyone?), than as a full-blown Win browser.

    • 07.

      […] following comes from CSS3.info: Dave Hyatt has recently checked in to the WebKit repository some basic support for using the […]

    • 08.

      I would imagine that adding text features (like font stroking, maybe even embedded fonts) to a custom portable font engine is easier, and is definately more consistent than implementing those same features for every ported platform’s different font rendering system.

    • 09.

      […] Read More…Source: Daring Fireball Posted in Latest News |January 9th, 2008 by News| Leave a Comment […]

    • 10.

      As Jan suggests, if the change in font rendering means differences in how em’s, line height, etc.. are worked out then I think this would be a turn for the worse.

    • 11.

      @dvessel – In CSS, 1 em is equal to the current size in pt. Nothing to do with the text rendering. I also think Cleartype compensates for it’s hinting in the line-height – meaning that the most difference a line could have would be a fraction of a pixel (The biggest difference between windows’ font rendering and Mac OS X’s is that windows attempts to align all the major points of a font perfectly with a pixel, whereas Mac OS X preserves the shape, mostly, which makes it ‘blurry’ by comparison)

      But the issue should never arise. Your text should flow through your document, and work the same if the exact sizes of the glyphs are not what you expect. The same thing would happen if someone doesn’t have the font you specify – or resizes the font on your page. The same thing happens between using a page in IE, Firefox, and Safari already. IE uses two text rendering engines on the same platform, depending upon user preferences…

      The web is a very flexible medium. If it matters that your line breaks are slightly off, you’re doing it wrong.

    • 12.

      This is terrible! Cleartype’s anti-aliasing method reduces horizontal resolution of letterforms by 1/3 in order to ‘smooth’ text. Just compare any large typeface with ‘standard’ Windows anti-aliasing to cleartype (or check out these enlargements – http://www.kapowaz.net/uncleartype.html). Capitulating to the Windows users who believe Safari’s anti-aliasing is inferior is simply wrong.

    • 13.

      @Ben Darlow – That webpage extremely underestimates the effect of sub-pixel smoothing, and also, you seem to have gotten it’s effect backwards. Subpixel smoothing, used in Cleartype and in OS X – TRIPES the horizontal resolution of type. Unfortunaely, it also makes it look terrible when scaled.
      His complaints stem from a misunderstanding of how sub-pixel smoothing works. That 1 yellow pixel actually is three subpixel elements – red, green, and blue. On his screen the pixels are in the order RGB – so the blue is darkest (as it’s nearer to the edge of the letter) the green is in between, and the red is lightest. This happens to make yellow when you blow it up. The number of steps between black and white are the same. They’re just in a smaller area

    • 14.

      @Paul Walker: I understand that the horizontal resolution is tripled in the same width, but the way MS’ algorithm approaches this has undesirable effects. Compare the outline of the O letterform, and see how many horizontal steps there are compared to vertical. Now zoom into a similar sized piece of text with WebKit doing the rendering (or Gecko under OS X). Notice the difference? Under OS X the anti-aliasing still occupies more than one screen element. In Cleartype, the algorithm tries to squeeze all that information into a single screen element and consequently the horizontal resolution looks a lot lower than the vertical. Again, compare non-cleartype Windows anti-aliasing to cleartype and you’ll see that cleartype looks less anti-aliased than its older sibling (yes, even on TFT displays).

      Ultimately though, I don’t see this decision to add cleartype rendering to Safari/Win as a technical decision, but a psychological one. Anti-aliasing on Windows and OS X have been very different for a long time, and so naturally those who’ve been using Windows all this time will be more familiar with the Windows method.

    • 15.

      I’m using Windows Safari 3.0.3 (3.0.4 doesn’t work on Win2k for me) despite the fact it’s not a particularly great browser compared to Opera (for one) for the simple reason that its text rendering is head-and-shoulders above anything else on Windows – it just looks so damn good!

    • 16.

      While I agree that larger text sizes look much nicer with the CoreGraphics renderer I have had a lot of trouble with it when it comes really small text sizes (xx-small), especially on coloured backgrounds. Yes, you DO need them sometimes!

      Here Safari is incapable of matching the readability of Cleartype which is intelligent enough to switch off anti aliasing below a certain size. Sure, it means text bodies look slightly different than the font designer intended and that it doesn’t match what it would look like on paper but surely readibility is more important than either of these concerns. Besides:

      A webpage is not a printed document
      A webpage is not a printed document
      A webpage is not a printed document
      A webpage is not a printed document
      A webpage is not a printed document
      A webpage is not a printed document

      (repeat until it sticks)

    • 17.

      >its text rendering is head-and-shoulders above anything else on Windows – it just looks so damn good

      On Windows *2000*, maybe. But W2K is an 8-years old OS and does not have ClearType to begin with. On XP the story would be different, and yet again with Vista and WPF.

    • 18.

      This either does not work or was already included in the latest 2 builds of Safari.

      Either way Safari’s text rendering is terrible! I couldn’t even read this page in Safari because it is so blurry.

    • 19.

      “Cleartype which is intelligent enough to switch off anti aliasing below a certain size.”

      Cleartype still attempts to AA very small (like, 3 pixel high) fonts, add it’s hinting in and you end up with a pixelated, black mess.

    • 20.

      We did quite a bit of testing around this, and found one of the biggest issues with the WebKit rendering on the PC was the gamma settings. The Mac assumes certain gamma settings that just aren’t the same on the windows side. This heavily influences the mid-toned pixels, making them appear heavier under windows than on the Mac.

    • 21.

      Cleartype gives me a headache.

    • 22.

      There´s a way to use quartz rendering in Safari 4 for windows? 


Advertise here?