Web Annotation Demo



  1. About This Demo

    This is a demonstration of Marginalia, my web annotation implementation. You can highlight a passage of text, then type a note in the margin to associate with it. The complete version saves your annotations, but for this demo I have not connected up a database: if you reload this page, your changes will disappear.

    Annotation works both in Firefox and Internet Explorer. Other browsers may display the annotations, but as far as I know you cannot create them with other browsers (this may change as W3C standards are more widely adopted). Note that previous versions of this demo would cause IE to crash; this has been fixed, nonetheless use of this page is at your own risk.

    In addition to annotation, Firefox users will be able to try smart copy. Select some text, then copy it somewhere (e.g. into an email message, a word processor document, or the text box at the bottom of this page). The copied text will be prefixed by information about the source of the copy. This is intended as a feature for discussion forums, so that users can more easily refer to other messages when they quote them.

  2. Detailed Instructions

    Annotation

    Action User Interface
    Creating an annotation Select some text (typically with the mouse), then click on the tall button between the text and the annotations in the margin. This will create a new annotation box on the right; type in text and click elsewhere or type Enter when you're done. Note that the selection can start in one paragraph and end in another, contain part of an HTML heading, etc.
    Editing a note Click on the note in the margin. It will turn into an edit box. Make your changes, then click elsewhere or type Enter to save them.
    Deleting an annotation Click on the x icon to the right of the note in the margin. The note and the associated highlight will be removed.
    Make an annotation private The strange icon to the left of the x indicates whether the annotation is public or private. For this demo, that makes no difference, but in a discussion forum (e.g. in Moodle), this can allow you to selectively share your annotations.
  3. For Developers

    Please view the HTML source for this page to see how simple it is to add annotation support to a page or application. Comments in the HTML describe what Javascript and CSS classes are required to make this work. For further instructions, download the stand-alone source code.