Alp Toker

Recently we’ve been working to finish off and land the last couple of fixes to get a perfect pixel-for-pixel match against the reference Acid3 rendering in WebKit/GTK+. I believe we’re the first project to achieve this on Linux — congratulations to everyone on the team!

Epiphany using WebKit r32284

We also recently announced our plans to align more closely with the GNOME desktop and mobile platform. To this end we’re making a few technology and organisational changes that I hope to discuss in an upcoming post.

With the revised deadline for Google Summer of Code ‘08 student applications looming, we’ve been getting a lot of interest in browser-related student projects. I’ve put together a list of some of my favourite ideas.

• GNOME ideas
  • Epiphany
    • Desktop integration
    • Bookmark and history integration
    • JavaScript debugger based on Drosera / Web Inspector
  • Evolution
    • Bug tracking aid
  • Empathy
    • WebKit Adium theme support
  • Desktop widgets
  • Integrated web app launcher
• WebKit ideas
  • Cairo SVG backend completion
  • GTK+ port test suite completion
• Mono ideas
  • WebKit-based HTML editor

If in doubt, now’s the time to submit proposals. Already-listed ideas are the most likely to get mentored but students are free to propose their own ideas as well. Proposals for incremental improvements will tend to be favoured over ideas for completely new applications, but a proof of concept and/or roadmap can help when submitting plans for larger projects.

Update: There’s no need to keep asking about the status of an application on IRC/private mail etc. It’s a busy time for the upstream developers but they’ll get back in touch as soon as possible.

Today we reached a milestone with WebKit/GTK+ as it became the first browser engine on Linux/X11 to get a full score on Acid3, shortly after the Acid3 pass by WebKit for Safari/Mac.

Epiphany using WebKit r31371

There is actually still a little work to be done before we can claim a flawless Acid3 pass. Two of the most visible remaining issues in the GTK+ port are :visited (causing the “LINKTEST FAILED” notice in the screenshot) and the lack of CSS text shadow support in the Cairo/text backend which is needed to match the reference rendering.

It’s amazing to see how far we’ve come in the last few months, and great to see the WebKit GTK+ team now playing an active role in the direction of WebCore as WebKit continues to build momentum amongst developers.

Update: We now also match the reference rendering.

Am here in the LHR lounge. In a couple of hours, we take off for the INdT Bossa Conference, Pernambuco, Brazil via Lisbon. Bumped in to Pippin who will be presenting Clutter. Also looking forward to Lennart’s PulseAudio talk amongst others.

If you happen to be going, drop by on my WebKit Mobile presentation, 14:00 Room 01 this Monday. We have a small surprise waiting for Maemo developers.

There was an incredible amount of productive hacking and discussion at the hackfest, covering the lower parts of the stack like Cairo and Pango as well as the GTK+ core and related work like toolkit web integration.

Until I get round to writing things up, I refer you to Emmannuele’s posts. He summarises some of the graphics topics that came up and I would echo his sentiments about what a well organised, fun and dynamic event this was.

I’ve put up the slides from my FOSDEM ‘08 talk on developing Web/GTK+ rich internet applications with WebKit and deploying them on the desktop and on mobile devices. If you were simply too hung over from the night before to get to the morning session or couldn’t make FOSDEM, be sure to check it out.

View slides (PDF format)

Demo sources

• Hosting a Dashboard widget
  • Simple example without JS integration

(Will update this post with more demo code over the next few days.)

Citations

• Slide 20:  All the cool kids are doing it (February 3rd, 2008) — donscorgie.livejournal.com
  
• Slide 30: WebKit and XULRunner (Mozilla) side by side on the XO (August 2nd, 2007) — j5live.com
• Slide 32: WebKit testing methodology for reproducible mobile benchmark performance results
• WebKit/GTK+ build instructions

If you’re attending FOSDEM (Brussels) next weekend, come along to my GNOME devroom talk on Web integration:

“WebKit/GTK+ is a brand new port of the WebKit content engine providing standards compliance, high performance and seamless integration with the GTK+ stack. I’ll be demonstrating some of the latest features and taking a look at the ways developers can adopt the WebView API and apply HTML5, CSS, SVG, canvas and AJAX to create location-aware hybrid Web/GTK+ rich internet applications.”

Update: You can now get the slides from the talk.

What?

The talk will be short and light (only a 1/2 hour session) but I’ll be around all weekend so feel free to touch base if you have more questions or ideas. This session will target:

• GTK+ developers
• Web designers
• Anyone looking to deploy online and offline Web applications
  • on the desktop
  • on mobile devices

When?

11:15 - 12:15, Sunday, February 24, 2008

Where?

FOSDEM GNOME/Cross-desktop Developer Room, H.1301

Brent Fulgham, whose work I’ve already mentioned now has the WebKit/Cairo Windows port up and running.

This is the “native Windows port” a lot of people have been waiting for (though it’s technically no more or less native than Safari’s WebKit).

The taxonomy of the new port places it very close to Apple’s WebKit for Windows, which will remain the default build configuration. Both share the same foundation libraries, networking stack and build system.

The only difference is that the proprietary, non-redistributable CoreGraphics has been conditionally replaced (#16979) with the Cairo-based graphics backend developed and maintained by the WebKit GTK+ team. This conveniently lets us maintain the new code as an officially supported sub-port of WebKit without much additional infrastructure.

The result will be a WebKit Windows build that’s open and freely re-distributable for use in Open Source and proprietary/commercial applications (as long as any modifications to WebKit are made available), not just Safari.

This serves as validation of WebKit’s new porting layer, the modularity of the Windows port (Adam Roben and the Win team, you rock!) and the Cairo graphics backend.

Some technical details:

• Provides C++ and COM APIs including a full COM DOM binding. The interfaces aren’t yet final and are expected change.
• The Cairo backend will be used for on-screen rendering as well as printing, including native PDF output.
• Cairo is used for rendering all content including HTML, canvas and SVG.
• Will continue to use Apple’s Open Source CF and CFNetwork libraries for other functionality.
• The CF/CFNetwork libraries will need to be re-built from the available APSL 2.0 source releases. There may be small differences from the Safari binaries that need to be taken into account.
• Still needs work on basics like text rendering and build system integration. Patches welcome. Nothing available for end users yet.

For WebKit/GTK+ fans, the good news is that this work should help bring more developers and testers to the shared Cairo graphics backend. Everyone wins!

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