Web Annotation

Recently I have been trying to figure out how to implement annotation for messages on an online bulletin board. Users should be able to highlight a passage of text, just as they can with a physical book. I haven’t found a good solution.

Annotation has been persued by other organizations, including a standard by the W3C and Brendan Eich‘s recent suggestion that annotion should be featured in future Mozilla browsers. There are also browser plug-ins. Most are per-page annotations or associate an annotation with a particular point in the text, not a text range. Others are IE-specific and require client installation, or require a separate annotion server. Even though the web is designed for the display of documents, and annotation is a common activity with paper documents, there seems to be no clean solution using standard web technologies.

The problem is that an HTML document is a hierarchy. For example, an article may consist of sections, which in turn break down into paragraphs inside which are emphasized elements of text. There is no way to mark a range of text which starts in one element and ends in another, and hence no way to highlight it.

There appear to be only two ways to achieve highlighting. The first is a hack: break up a highlighted section into multiple chunks and highlight each of them. Let’s take the following document:

<pre><p>Twas brillig and the slithy toves</p>
<p>Did gyre and and gimble in the wabe</p></pre

If we wish to highlight “the slithy toves Did gyre”, then the obvious way to do it would be like this:

<pre><p>Twas brillig and <em id=‘h1’ class=‘highlight’>the slithy toves</p>
<p>Did gyre</em> and gimble in the wabe</p></pre

Of course this isn’t valid HTML. Instead, we must break up the highlighting, like so:

<pre><p>Twas brillig and <em id=‘h1a’ class=‘highlight’>the slithy toves</em></p>
<p><em id=‘h1b’ class=‘highlight’>did gyre</em> and gimble in the wabe</p></pre

This is messy – determining where to place the highlighting is difficult and associating user actions with a highlight is complex (the application must deal with the fact that h1a and h1b are part of the same highlight block).

The only apparent alternative is to extend the broswer. Then data could be provided in a special non-HTML format (e.g. Javascript or custom embedded XML) to specify to the browser what needs to be highlighted. I don’t even want to imagine what would be required to make that work. Internet Explorer can likely do this right now, although I have been unable to find documentation for similar capabilities in Mozilla.

From a semantic point of view, highlighting often isn’t really part of the document, so the browser-extension solution does make a fair amount of sense. Most annotation work so far assumes this: annotations are owned by users, not by documents. But sometimes highlighting appears to be part of a document’s content. Perhaps a professor wishes to post a document with passages highlighted. We may say that such cases are degenerate (i.e. the professor owns the highlighting, not the document, otherwise the highlighting can be implemented as a series of smaller highlights as in the hack example). Even then, existing solutions are complex and inflexible. They make it difficult or impossible, for example, to include an annotation mechanism in a web application, or for developers to experiment or develop their own interface for collaborative annotation.

The ideal solution would make it possible to mark up a section of document in a way which doesn’t obey the HTML hierarchy (a problem is similar to the difficulty the W3C has had in coming up with a method to select columns for styling in a table), or to select a range of characters in CSS – something which CSS currently only supports with the ::first-letter and ::first-line pseudo-elements. Neither of these is likely to be standardized soon if ever. That leaves the browsers. Until then, we must hack.

If you can help me with more information – even if it has been a while since I posted this – please drop me a line: geof at geof dot net.