Alp Toker

After a weekend hack session with Øyvind Kolås, I got WebKit/GTK+’s Cairo backend rendering straight to OpenGL with Cairo’s new OpenVG backend and ShivaVG:

At first the colours were a bit off and performance was nothing to write home about. But Øyvind promptly pushed a fix and cooked up a patch to prevent static images being re-uploaded, and things started to fly.

The performance boost is most noticable for SVG and Web pages with large, animated graphics and dynamic content. We’re looking at full repainting is in the hundreds-of-FPS range.

I then turned my attentions to accelerating the canvas element. WebKit/GTK+’s canvas is already the fastest free implementation around, but traditional approaches to rendering the canvas will only get you so far.

Sure enough, with a little more work I had Ilmari Heikkinen’s Canvas Animation Kit Experiment (CAKE) running faster:

(The screenshot was caught during a GL buffer swap, it’s all very smooth in reality.)

Accelerating the canvas was slightly tricky since canvas makes some assumptions about image data, but as we see here it’s quite possible to make it go fast.

Patches should start to appear on #16885. There’s work to be done to improve rendering quality, get text smoothing back etc., but it’s a start.

This feature can be used both to acelerate WebKit/GTK+ and in a standalone configuration with only a GLib dependency, as requested by Linden Lab who are looking at integrating WebKit into their virtual 3D environment.

It should also be usable with the brand new Cairo-based WebKit Windows port (#16979) that’s on its way.

If you’re running a WebKit nightly, your browser supports two new ways of specifying custom fonts.

CSS2 ‘WebFonts’

With WebFonts you can define custom font faces by passing a URL to the font file:

@font-face {
  font-family: 'Bitstream Vera Sans';
  src: url('http://www.freedesktop.org/~alp/tmp/Vera.ttf') format(truetype);
}
 
h1 {
  font-family: 'Bitstream Vera Sans', sans-serif;
}

The font gets downloaded and used without installation. A List Apart has some fancy CSS Zen Garden examples showing off the feature:

Now that the WIP Acid3 test requires TrueType/@font-face support, I expect other browser engines will be quick to join Opera and WebKit in implementing this.

SVG fonts

Then there’s the recently added support for SVG fonts.

When #16880 lands, it’ll be possible to use SVG fonts not only in SVG content, but also as a standard WebFont format with @font-face:

@font-face {
  font-family: 'SVGraffiti';
  font-weight: normal;
  font-style: italic;
  src: url("SVGraffiti.svg") format(svg);
}

This is still under development but works remarkably well. Nice work, Nikolas!

SVG font backend for Cairo

SVG fonts aren’t just for the Web — work is under way to make it possible to use them throughout the desktop with the experimental SVG font backend for Cairo. More on this coming very soon.

Checking it out

Building WebKit/GTK+ is now easier with the newly introduced autotools build system. Try the build instructions on GNOME Live! or just use jhbuild (module ‘WebKit’).

The word is out. I’ll be coordinating with Epiphany developer Christian Persch to see how the GTK+ team can put Web functionality in or alongside the UI toolkit in the weeks leading up to the GTK+ Berlin hackfest 2008.

We’ll be studying existing toolkits featuring Web widgets and considering what changes might be necessary to support something like a GtkWebView. Some possible lines of investigation include:

• A shared HTTP stack
• A standardised GObject/C API representation of the DOM
• The provision of editing capabilities
• A generic inline search toolbar

My personal interest is in GTK+ integration, favouring native GTK+ styling and event propagation. (Let’s put an end to ‘Linux’ themes.) Our agenda will tie in with other topics to be discussed at the hackfest including vector-based UI styling which could address the needs of modern content engines like WebKit and Gecko.