Proper ClearType Support!


Several months ago, the Appcelerator team noticed that the WinCairo build of WebKit failed to properly render ClearType glyphs at the end of lines. At the time, frankly, I was just pleased to have rendering of *anything* on the screen, and basically brushed their report aside as perfectionism better addressed at a later date.

Well, today that 'later date' finally arrived. After chatting with Martin Robinson about the issue, and finally recognizing the very poor font quality when rendering with CAIRO_ANTIALIAS_GRAY (rather than the desired CAIRO_ANTIALIAS_SUBPIXEL) I did a bit of Googling. It turns out some similar issues were discussed in early 2006 (and apparently resolved) on the cairo development list. After mailing the Cairo guys to ask about the status of this particular bug, I received a message from The_Decryptor (my new best friend), pointing out that Firefox has encountered the same problem back in February, and had resolved it.

The underlying problem is perhaps best explained by the comment on the patch:

The bounding box reported by Windows supposedly contains the glyph's "black" area; however, antialiasing (especially with ClearType) means that the actual image that needs to be rendered may "bleed" into the adjacent pixels, mainly on the right side. To avoid clipping the glyphs when drawn by _cairo_surface_fallback_show_glyphs, for example, or other code that uses glyph extents to determine the area to update, we add a pixel of "slop" to left side of the nominal "black" area returned by GDI, and two pixels to the right (as tests show some glyphs bleed into this column).

How well does this work? The attached image shows the difference. The left-hand side shows the strange end-of-line behavior of our stock Cairo build. It's especially pronounced in the numeral '1', but can be seen to a lesser extent in the lower-case 'j'. The right-hand side is the patched build, which is nearly identical to Safari on my installation.

Many thanks to Marshall Culpepper and Martin Robinson for coming up with the initial workaround, and to The_Decryptor and the Firefox team for their careful and thorough review of the issue, and the solution!

Comments

The_Decryptor said…
Thanks for the kind words, I'm glad to see it's working.
Martin Robinson said…
Great to hear this issue is resolved!
Martin Robinson said…
Or, at least, a resolution is in sight. :)
Anonymous said…
Don’t forget to test with italics... Italics I, l and f in particular.
Unknown said…
Excellent! I have been using this in WebKit.NET for a while. Everything looks good, except many characters get cut off.

Any chance you will post a new build soon?

thank you
thank you

ryan

Popular Posts