Browsers

Retain Accessibility Immediately

There has been a heated argument recently on the W3C Canvas API mailing list between accessibility advocates and browser vendors over a pretty tricky topic: should the Canvas API have graphical “objects” to make it more accessible, or should authors use SVG for that? I think it’s a false dichotomy, and I offer a proposal to suggests a way to improve the accessibility potential of the Canvas 2D API by defining how SVG and the Canvas 2D API can be used together.

This brings together some ideas I’ve had for a while, but with some new aspects. This is still a rough overview, but the technical details don’t seem too daunting to me.

Continue reading “Retain Accessibility Immediately” →

Getting In Touch

Last week, I published the first draft (and subsequent updates) of the Web Interface specification, which defines touch events. This is the first spec from the new W3C Web Events Working Group.

Peter-Paul Koch (PPK) gave it a positive initial review. Apparently, others thought it was news-worthy as well, because there were a few nice write-ups in various tech sites. Naturally, cnet’s Shank scooped it first (he has his ear to the ground), and it was fairly quickly picked up by macgasm, electronista, and Wired webmonkey.

I thought I’d go into a few of the high-level technical details and future plans for those who are interested.
Continue reading “Getting In Touch” →

Stumbling Towards a Graphical Workflow

I’m working with a professional designer, Michael, on some graphics for my upcoming MIX presentation.  I’ve worked with designers before on various projects, some SVG, some traditional Web design, but this is my first time working on an SVG project with someone who never used SVG before, and it’s been an interesting experience, which I thought I’d jot down for anyone interested.

Both of us have been busy with other projects, and since we are in different places (me in Chapel Hill NC, him in Atlanta GA), we have only gotten to touch base a few times.  Michael has delivered some first drafts of the graphics, which look lovely, and I decided to dig into the underlying code, confident that I could trim down the file size and thus help browser performance.

My personal graphical editor of choice is Inkscape, which is a fine tool for all its warts (though it’s a little painful on Mac, where it is hosted as an X-11 application); typically, though, I create SVG either programmatically with a script or manually with a text editor (yes, I know that’s crazy… but it can be done).  Michael, being a professional designer, uses Adobe Illustrator, and I am keen to have him use the tools he is most comfortable with.  Since I want SVG to be used by mainstream designers, I want to understand how their tools work and what their workflow is like.

So, in order to make sure that we can roundtrip the files as seamlessly as possible, while still leveraging the features of SVG, I set about today to establish a workflow with Illustrator, TextMate (my go-to text editor, with a custom SVG code template bundle), Firefox, and its native debugger extension Firebug (with its handy “Inspect Element” context-menu selection).  My goal: to make reusable icons out of some of the graphical assets in the larger image, to be referenced by SVG’s <use> element. Continue reading “Stumbling Towards a Graphical Workflow” →

Platform Games

I attended Google I/O a couple weeks ago, and had a great time.  They really put the “hype” in HyperText Markup Language 5, identifying things like the Geolocation API and some of the WebApps Working Group deliverables as part of “HTML5”.  Not quite accurate, but it was a branding exercise, not a technical one.  Notably absent from the things they rolled into HTML5 during the keynote, though, was SVG… in fact, they seemed to go out of their way to avoid it.

But it’s in there. Continue reading “Platform Games” →

Webmandering

A while back, Henri Sivonen stumbled upon a diagram on the W3C site of the technology stack, a curvy-block Venn-diagram overview of the different technologies from W3C and where they fit into the Big Picture.  It’s an attractive diagram, but it oversimplifies things, and shows a decidedly W3C bias toward the Web.  It’s clearly been used past its expiration date, and those who consume it might feel a bit queasy.

Henri strongly criticized this depiction.  He rightfully points out that HTML is not included in this vision (showing XHTML only, which looks a bit silly these days), but then complains that HTML5 and XHR are not included in the diagram.  But of course, HTML5 isn’t even in Last Call yet, much less a W3C Recommendation, so it doesn’t really belong in that particular diagram (oddly, Henri credits XMLHTTPRequest to WHATWG, rather than its originator, Microsoft).

To his credit, Henri put his money where his mouth is, and took the trouble to make a diagram of the Web stack the way he sees it, which presumably better reflects the “real Web”.  It omits many of the W3C technologies, and inserts some of the more common ones that aren’t from W3C (most notably Javascript).  It’s a good diagram, but oversimplifies the landscape dramatically.  He follows the W3C diagram in putting “Internet” at the base of the stack, but doesn’t correct it to include such ubiquitous technologies as email or chat (XMPP, IRC, etc.) even though those are often part of browser-based technologies (GMail, et al).  Of course, he deliberately omits intranets-connected devices, even though that’s part of the browser world, because the official doctrine of the WHATWG is that the intranets (including those that are partly open, such as at universities) are “not the Web”.  I will also quibble that he overlaps Accessibility only with HTML, not with SVG.  But most glaringly, he includes Ogg Vorbis and Ogg Theora, though they aren’t (yet!) really used on the Web, and omits the dominant technologies in that space, MP3 and Flash (and more specifically, H.264).  He covers himself here by saying that this is for a “contemporary browser”, with the insinuation that it doesn’t include plugins, though to users and authors that is a pale distinction.  He also neglects PDF (ISO 32000), which is all too prevalent on the Web, and which several browsers do render (if I recall correctly).  So, it’s not really a picture of the real-world Web stack, either.

The Frames remind us, in their song in “God Bless Mom”:

You’ll see how hard it can be
To keep your side of the deal,
And you’ll see how hard it can be
To keep one foot in the real.

So, his diagram is flawed.  So what?  Why am I picking on it?  I’m not, really… it’s a good diagram, and it serves a certain purpose.  I’m picking on that purpose itself.  Henri was quick to criticize the W3C diagram (on a page where nobody can comment, I note), not because it wasn’t accurate, but because it advanced his agenda to do so (just as the W3C was advancing its agenda by making the original diagram).

Data visualization, like statistics or slogans, has a way of territorializing the map, in a kind of graphical gerrymandering. I’m sure that Henri didn’t mean to make such glaring omissions, but I’m equally sure that the creator of the original W3C diagram didn’t have sinister motives either.  People get busy, and reuse what they have to hand that meets their needs, even when it’s sometimes not quite correct.

I really respect Henri, but what he fails to understand here, or at least to admit, is that different data visualizations are best suited for different audiences and different purposes.  He’s shown a clear bias in his diagram toward depicting the “Open Web Stack” (a bias I have to admit I share) and toward desktop browsers (which I find too narrow), with a Web developer audience.  That’s perfectly cromulent.  But his diagram is not at all suited toward showing the different work going on at W3C, and where it fits in the larger Internet, in an executive summary.  Both the offending W3C diagram and Henri’s own diagram are gross oversimplifications… which is the point of data visualizations.  The map is not the territory.  If I were to make a diagram that encompasses the Web tech landscape, it would include both W3C technologies and technologies from other sources, and code the origins with styling; it would clearly indicate which technologies are open (that is, not proprietary), which are under development and which are stable, and link each node to the definitive resource for that tech; it would not stack them up in a neat little box, but would show the interconnections via lines.  And it would serve a different purpose than either of these other diagrams.

Why was only XHTML included in that W3C diagram, and not HTML?  Wishful thinking.  Say it enough times, and it just might come true, and a picture is worth a thousand words.  We’re all dreaming the Web we want into reality, every day.  I’m tired of the false dichotomy that’s too often drawn between W3C and its members and participants.  How about we lay off the divisive rhetoric?

CSS Link Hack in SVG

While answering a question about styling SVG with CSS in the Freenode #svg IRC channel (yes, people still use IRC), I threw together a simple example to illustrate.  I like to do this, since in keeps me in practice, and gives me a chance to check the state of current implementations in the fast-changing world of SVG browser support.

The question was how to use CSS stylesheets, both internal and external, with SVG in Inkscape.  While I know that Inkscape makes heavy use of CSS inline style declarations on elements (more than is to my personal taste, to be honest), I didn’t (and don’t) know if it has any UI features for adding internal stylesheet blocks, or links to external stylesheets.  So I made a little test…

svgstyle.svg

<?xml-stylesheet type="text/css" href="svgstyle.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%" viewBox="40 0 145 70">

  <style type="text/css"><![CDATA[
     ellipse
     {
       fill: lime;
       stroke: green;
       stroke-width: 10px;
     }
  ]]></style>

  <rect id="inline" x="50" y="10" width="30" height="50"
        rx="5" ry="5"
        style="fill:lime; stroke:green; stroke-width:3px;"/>
  <ellipse id="internal" cx="103" cy="35" rx="15" ry="25"
        style="stroke-width:3px;"/>
  <circle id="external" cx="150" cy="35" r="25"
        style="stroke-width:3px;"/>
</svg>

svgstyle.css

circle
{
   fill: lime;
   stroke: green;
   stroke-width: 10px;
}

Which looks like this (at least, in Firefox, Opera, Safari, and presumably Chrome):

Both internal styles worked fine in Inkscape, but the external reference did not, showing just a black circle.  I’m not really surprised.  Note the clunky way that you have to link to external stylesheets in SVG:

<?xml-stylesheet type="text/css" href="svgstyle.css" ?>

That’s really XSLT-licious. I have to confess, I don’t really care for PIs (insert dated Magnum PI joke here), or XML prologs in general… they seem somehow clumsy and un-XMLy, like a throwback to SGML. And as far as I know, they can’t be created or changed dynamically via clientside script. Compare that to the relatively easy and straightforward X/HTML way of linking to external stylesheets:

<link href="svgstyle.css" rel="stylesheet" type="text/css"/>

In the SVG WG, we intend to allow authors to reference external stylesheets in a manner a little more modern and consistent with what authors are already used to using, in some upcoming spec. We could do that a couple of different ways. We could allow them to use an xlink:href attribute on the <style> element, in the same way we currently treat the <script> element (that is, if there’s a resolvable external link, we use that, otherwise we use the child content of the element), or we could add a <link> element like X/HTML, or both. I kinda like the idea of allowing either.

To that end, I made a couple of tests, just playing around, to see if any browsers accidentally supported either of those options, by merit of having some shared codebase with X/HTML in their implementations. Unsurprisingly, neither worked.

But then I had another idea… use the an <xhtml:link> element in the XHTML namespace…

<xhtml:link href="svgstyle.css" rel="stylesheet" type="text/css"/>

With this rather happy result, which works in at least Firefox, Opera, and Safari.
external-link-xhtml.svg:

I don’t know if this is by design, or if it just fell out of the model, but I have to say I’m pleased as punch that it works. If nothing else, it’s a great proof of concept for adding more ways of linking to CSS in the SVG spec. This one goes in my toolkit, and I’m going to try to ensure that it gets standardized, if it’s not already there in some corner of some other spec. Probably somebody already knows about this (hell, probably everybody does, and I’m late to the party), but for me it was a w00ty discovery.

Update: heycam speculated that you might also be able to use @import rules, and indeed you can:

<style type="text/css">@import url(svgstyle.css);</style>

iSVG

Since before the iPhone was released, there was speculation that it would support SVG.  After all, WebKit supports SVG, and Safari is based on WebKit, and the iPhone uses Safari.  But alas, the build of Safari that went on the iPhone did not include SVG support… nor, more famously, did the iPhone support Flash or Silverlight. Rats!

Realistically, it doesn’t make a huge impact in the total deployment of SVG on mobile devices.  For all that they are cool, iPhones make up a pretty small margin of mobile devices.  Opera is probably deployed on more devices, and it’s supported SVG for a while.  SVG is used on the BlackBerry, as I understand.  The BitFlash and Ikivo SVG players are deployed on something like half a billion phones, both for content viewing and as the GUI of the device itself.  But… still, having it on the iPhone would be a bit of a coup, and would enable lots of neato Webapps.

And as of yesterday, when I updated the firmware on my iPod Touch, SVG is now supported natively!

Continue reading “iSVG” →

Third Time’s the Charm

I’m here in Sydney to attend the SVG Working Group F2F. This marks the third time I’ve done this trip. When I first joined the SVG WG, I flew here for my first face-to-face meeting, and SVG 1.2 Tiny was in the can, no new features, only such changes as required by Last Call comments; this was a bit frustrating for someone who set out to represent authors, since I really felt some new functionality was needed. But it had already been too long between versions, and SVG 1.2 Tiny just needed to be published before new work could be started, so I took one for the team. I was assured that it would be published and done within months.

Well, the best-laid plans… I was here last January again, and the same situation applied. We’d received an avalanche of Last Call comments, from typos to tweaks to time-wasters to trip-wires. It amounted to a sort of Denial of Specification attack. Many of the comments were valid criticisms (though a few of those couldn’t be helped due to legacy or other dependencies), but an equal number were ideological. But all of them had to be dealt with. This had occupied the past year, and looked to occupy the foreseeable future, but we soldiered on. The biggest chunk of work was dealing with errata for SVG 1.1, and with the test suite and implementor feedback (which is the point of “CR”, the Candidate Recommendation stage of becoming a W3C Recommendation). We also split out some functionality into the WebAPI WG, so it could be more generally used by other Web technologies besides SVG. So last year, it looked like one step up and two steps back.

And now another year has passed. In this last year, I came to work for W3C directly, and the SVG WG has two new Chairs, one each from a desktop and a mobile implementor (Opera and BitFlash). SVG 1.1 is better specified, due to errata, and better implemented, due to good, interoperable native implementations in Opera, Safari/WebKit, and Firefox. SVG 1.2 Tiny is widely deployed on mobile phones (more widely than Flash Lite), due to excellent implementation by BitFlash and Ikivo, and has a good test suite that’s still growing (and will keep growing even after it’s published… can’t have too many tests). We’ve cleaned up the SVG 1.2 Tiny spec, and made progress on ancillary specifications. We’ve pared down what needs doing in order to move forward to the next stage on the Recommendation Track. We’ve learned from past mistakes, and we’re working more openly with implementors and the general public.

And we’re talking about new features. We spent a day this F2F planning several small modules for the next year or so that will add capability to SVG, and make it easier to author compelling content in this iPhone age. SVG was a bit ahead of its time (especially as regards uptake in desktop browsers), but with the delays of the past couple of years, competing technologies are pulling ahead. We’ve got an aggressive plan that includes bringing in more direct feedback from designers and developers, and targeted feature additions.

When I joined the Working Group three years ago, SVG was struggling and morale was low. But now we’re really excited by all the recent progress and the momentum behind SVG. This looks like a good year for SVG.

SVG On Acid?

ACID3, that is. Most of you will have heard of the ACID tests put together by the Web Standards Project in order to promote interoperability among browsers. Microsoft recently made a hit in the blogosphere by announcing that the next version of their browser, IE8, passed the ACID2 test, showing their commitment to Web standards.

Ian Hickson, who wrote the second ACID test, is now working on ACID3. He recently started a contest to get contributions from the community on what features they want tested.

SVG has had a huge surge of popularity in the past few years; it’s now used on Wikipedia and Google Maps, and largely implemented in 3 of the 4 major browsers (it works in Opera, Safari, and Firefox). There are a few inconsistencies between implementations, so we thought ACID3 would be a great chance for a push for SVG interoperability. The SVG Working Group, most notably Erik Dahlstrom of Opera and Invited Expert Cameron McCormack, devised a few tests that we hope will be included in ACID3.

You can read the explanations for the tests, and see the tests themselves, in Erik’s email. Let us know what you think, and if you support the inclusion of SVG in ACID3 (and let Ian Hickson know, too). Maybe by the release of IE8, it will pass ACID3 –and any SVG tests– too.

[originally published on the W3C Questions and Answers blog]

Update (25-01-2008): Just so you know, our efforts paid off.  Hixie accepted our tests, and SVG will be in slots  70-74 (or 75) of the Acid3 test.  I think this will be a great win for interoperability, and nice acknowledgment that SVG is a first-class citizen of Web architecture.  Thanks again to everyone who contributed to the tests and to the conversation, and to Ian Hickson for putting the tests in (and for driving Acid3 in general).

Two Tech Predictions for the New Year (or So)

Okay, first a disclaimer: none of this speculation comes from “insider information” I’ve gotten as an employee of W3C; but being surrounded by the swirl of standards, I suspect I may have picked up on a zeitgeist. I’m interested in seeing how well my predictions play out.

Prediction 1: Microsoft will merge its browser and office platforms

That’s what I would do if I were them. Right now they are in a bit of mindshare competition with online apps, like Google Docs; as Web apps transition to the desktop (like, the downloadable desktop GMail client), Microsoft will take their core competencies (the desktop Office suite) and make it more Web-friendly. They’ll take advantage of the fact that desktop apps are often more robust and speedier, and tie in the chief benefits of Web apps: distributed authoring, ease of deployment, and ubiquitous availability. To enable the latter, they also make a Office-lite Web app, sold as “software as a service”, for those who’ve bought the real product (though of course it won’t be as good as their desktop version); they might open this up in the razor-and-blade sales model.

They will merge two of their products, SharePoint Server and Exchange Server, into a sort of portal/wiki thing that ties into their new Office Browser. They will probably integrate chat (MSN, or whatever) into the whole thing, so you have some uber-communications suite: email, chat, collaborative distributed document creation, and all that enthralling office goodness.

This could be IE8 (or IE9), or a totally new product, but it will probably be a new version of MS Office. It will be their typical monolithic entry into the agile Web space. And of course, it will use OOXML as a native format.

Why I’m wrong: I think this would be smart, but the different divisions of Microsoft actually compete for resources. I wonder if they could play nicely together for long enough.

Update (25-01-2008): I’m actually going to Microsoft next week to talk about standards stuff. Maybe I will get an inside scoop.

Prediction 2: A cross-platform browser based on WebKit (but not Safari) will supplant Firefox

WebKit has a cleaner, faster (if less complete) engine than Mozilla, and it’s already been reused by Apple for Safari, Nokia for their mobiles, Adobe for Apollo (I think), and by Google for Android. But all those are controlled, as far as I can tell, by their name-brand deployers.

I think a new, more open repackaging will happen. It will be standards-based, and truly open-source, from the engine on up to the executable. It will implement Widgets (as being specified at W3C), so that people can make simple desktop applications based on common Web technologies. But the key enhancement will be a new, cleaner, lessons-learned, easier-to-author Extensions platform. Extensions, in my mind, are the most brilliant thing about Firefox, allowing slightly-above-average users to create new features for the browser, or to use features added by others; this gives great community buy-in. But it will be even easier to do in this new browser; this will probably necessitate a new XUL-like language, too, so people can add chrome, or it might just be in the form of script APIs. But what would be even smarter is to have the Extension editor, and Widget editor, built right into the browser, so making a new theme or feature or widget is as point-and-click as possible, with common tasks encapsulated (though for advanced enhancements, some scripting will be needed, in a smart editor with code completion).

Oh, and it will have SVG support.

Naturally.

Why I’m wrong: This is just my dream browser. Browsers are a hard market to break into, because there’s established competition, and you’re not making a product you can sell… you have to give it away. There’s already a lot of momentum around other efforts. But this is the browser I want. Too bad I’m so lazy.