The Hickensian

10.12.06 Cairo beats Safari?

25 comments
Tagged with: cairo, graphics, mozilla, text

As highlighted recently by Jeffrey Zeldman, Firefox text rendering lags behind that of Safari, or rather Gecko lags behind WebKit. This is because at present, Gecko browsers use the older Quickdraw graphics library, originally developed for OS 9, rather than Quartz, or the more recent Core Image libraries. Its been the main reason I prefer Omniweb or Safari over Camino/Firefox, text just looks SO much crisper and smoother.

Things are about to change however, as the switch to the Cairo graphics library in Gecko browsers will allow them to use Core Image on the OS X platform. There is already a developer release of Firefox 3.0, codenamed Gran Paradiso with Cairo enabled. You can also grab a latest trunk build of Camino, which also uses Cairo.

The improvements are already easy to see. My personal rendering bugbear has been the sub navigation on Amazon, which always renders roughly, particularly in Gecko. Compare these screenshots:

Comparison screenshots of Amazon navigation in Camino 1 Safari 2 and Camino 1.2+

Not only is Gecko with Cairo improved, it actually looks better than WebKit!. Looking at the example that Zeldman used, italics are MUCH improved also:

Zeldman.com in Camino 1.2+

It’s early days so there will be plenty of bugs, especially as the Mac platform is behind Windows and Linux, who’ve had Cairo enabled for about 6 months now. Testers are needed for OS X, so if you can lend hand, so please do grab a build and get reporting those bugs.

Comments | RSS

No.1

∞ Nik Steffen said 1158 days ago:

Finally Gecko is catching up, us (unlucky) Windows users have been confined to using the outdated engine for a while now.

No.2

∞ Joseph Murphy said 1158 days ago:

Camino was always extremely slow when writing new posts using WordPress, leading me to launch Safari when writing a new post. Extremely inconvenient. This new build of Camino is fantastic, it is so much better. Thanks for the heads up.

No.3

∞ Jesper said 1158 days ago:

Nitpick: Core Image doesn’t to the best of my knowledge actually render text. (Core Image is a good parallel to Photoshop filters – take image input, twist it and return image output.) I’m sure someone can write an Image Unit to do it, but it’d have to use the existing facilities (or suck) and it’d be like shooting someone by delivering the bullet by foot.

That said, Cairo has sounded awesome for years, and I’m glad we’re finally seeing something happening. QuickDraw needs to be taken out and shot, badly.

No.4

∞ rabsteen said 1158 days ago:

As a non-mac user, I’d be interested to know how Opera compares.

No.5

∞ eric said 1158 days ago:

Interesting update for gecko… the difference between Safari and Camino is pretty strong – it looks like safari is bolding the text. What gives with that?

No.6

∞ shorty114 said 1158 days ago:

Wow, the difference is stunning. Isn’t Firefox 3.0 also scheduled to have native Cocoa widgets?

No.7

∞ James Maskell said 1158 days ago:

Thanks for the heads up on this one. Text rendering was one of the few things keeping me back on Safari.

Do you know if there are any Camino Intel optimised builds available yet which have Cairo support?

No.8

∞ Cody said 1158 days ago:

The navigation on Amazon looks much clearer than that on my Safari. My font smoothing setting is set to Light which I think makes text look much more natural. If you use fonts in Photoshop, for example Arial set to 12px etc., it should nearly match the same when rendered in Safari when the font setting is set to Light. This to me says that setting the font setting higher than Light will make text too bold.

No.9

∞ Matt Lilek said 1158 days ago:

Jon, the Amazon navigation links you’re seeing are actually a bug. Amazon calls for bold, 9px Osaka. Osaka does not have a native bold so the current Gecko and WebKit are synthesizing it while the cairo-based alpha you tried is not, which is why it appears so much clearer.

If you drop back to the alternative font (Verdana) or view normal and bold Osaka in gecko/WebKit, you’ll see the bug.

No.10

∞ Jacob said 1157 days ago:

I cannot duplicate the amazon.co.uk bug that you’ve captured. I’m a windows user, and I visited the amazon website in firefox 2, IE7 and Gran paradiso, the sub navigation looks all the same to me.

http://www.members.cox.net/j4c08-5/images/textcomp.png

When I get back to school this week I’ll test it out on the macs there.

No.11

∞ Stuart Maynard-Keene said 1157 days ago:

GranParadiso is looking really nice. It may become my development browser and my default browser of choice if they continue to improve.

No.12

∞ Jon Hicks said 1157 days ago:

@Jesper – True, but Cairo does affect text rendering.

@shorty – Yes, I think they are due to be turned on any day now.

@James – I think there is, check the forums!

@Matt – True, but this shows how well its dealt with under Cairo. The Zeldman.com italics is perhaps a better example

@Jacob – This is a Mac issue I’m talking about here.

No.13

∞ Dustin Wilson said 1157 days ago:

@Rabsteen – Opera on the Mac renders the Amazon.co.uk navigation quite well, better than WebKit or Gecko browsers. I would have to say that the new trunk build of Camino 1.2 beats Opera’s text rendering. The best way to describe how it renders is how Camino 1.2 renders it except with the kerning a bit off.

No.14

∞ Anthony Baker said 1157 days ago:

Quick question on these nightly builds: How often do folks update once they’re using them? I was on Camino 1.1a—it’s now my default due to my reliance on GMail and the fact that Camino beats out all other browsers in the speed with which it handles JavaScript (and displays pages in GMail, in particular).

Are the 1.2+ nightly builds solid enough for regular use? What’s the best way to check which new additions I should upgrade to as they move forward?

Thanks!

No.15

∞ Daniel Andrews said 1157 days ago:

Anthony:

Caminoknight
http://www.versiontracker.com/dyn/moreinfo/macosx/15664

is an app that you can run and will check the ftp server for the latest version of Camino, and will also download the changelog and display that for you as well. Very handy app if you’re on the bleeding edge of Camino usage.

No.16

∞ Dan said 1157 days ago:

So, does Cairo mean that this bug will no longer be an issue on OS X?

No.17

∞ Uncle Asad said 1156 days ago:

Jon, glad you’ve found an example where Cairo text looks better. Pretty much everywhere I’ve looked, text has been blurry to the point of hurting my eyes :P

No.18

∞ Lode said 1156 days ago:

Where do I report bugs for Camino 1.2+ using Cairo? Because I am seeing quirky behaviour throughout different websites.

Problems that occur regularly: – Text ‘shifts’ when selecting. – Underlined links: line doesn’t extend the entire width or is too close to the text baseline.

I would be glad to help out, Camino is my default browser :)

Thx.

No.19

∞ David Smith said 1156 days ago:

Guys, bugs are definitely expected in this. There were no fewer than 3 major merges in a relatively short period of time (cairo, cocoa widgets, reflow branch). It’s not going to be a fun couple of weeks in nightly-build-land. You can report issues at bugzilla.mozilla.com, but be sure to search first, many of them are already known.

Also, Jon: could you put a note about the bold rendering being due to a Cairo bug (not synthesizing a bold font, specifically)? It seems dishonest to leave it up there as a shining example when it’s actually incorrect.

No.20

∞ ssp said 1155 days ago:

Nice to see this!

The engine even seems to indulge in making good use of ligatures. Even the non-standard ones like ‘Zapfino’ in Zapfino (see the web link for an example). This makes the Camino preview the third browser after Opera and iCab [and WebKit’s ATSU rendering, but I’d rather not count that because it seems quite broken] to do this.

No.21

∞ chas said 1155 days ago:

Hijack:
What about a lack of colorsync support ?

No.22

∞ Jon Hicks said 1154 days ago:

Sure, Colorsync support would be welcome (as would a lot of things quite franky), but this topic is about text rendering quality only.

No.23

∞ Jesper said 1154 days ago:

@Hicks: Of course, but Core Image doesn’t have anything to do with anything, so I don’t see how it merits a mention. ;)

No.24

∞ Jon Hicks said 1154 days ago:

Jesper – Cairo lets Firefox and Camino use Core Image, and not just Quartz. Its a monumental leap from the old Quickdraw, right up to the very latest graphics library, rather than still being behind a step or two.

So yes, I think that was worth mentioning.

No.25

∞ kL said 1154 days ago:

I think Opera renders using the same font+technique (it’s crisp and pretty), but just uses a pixel smaller font (simply because it rounds font sizes a bit differently than Gecko).