All posts
3 June 2010Rich text in notes
22 May 2010Hand-drawn annotations: writing on the page
25 March 2010Displaying the differences between versions of a document
22 February 2010Integrating A.nnotate with Moodle for keeping notes on on-line course materials
3 September 2009New features for annotating images and working on PDFs
16 June 2009Sharing an A.nnotate note link on Twitter
9 December 2008 A.nnotate 3 released for on-line and standalone users
20 October 2008 Preview of version 3: images, shared folders, and more.
17 August 2008 Enterprise server version available for installation
4 August 2008 A.nnotate at the Edinburgh Repository Fringe
20 June 2008 A.nnotate and (online) word processors for document collaboration
12 June 2008What we're working on
1 June 2008Update supporting UTF-8, scanned documents, and multi-size PDFs
4 April 2008A.nnotate launched
2 April 2008About A.nnotate
Robert, 3 June 2010

Rich text in notes

This has been on the todo list for a long time now so it is good to finally get it delivered. Understandably enough, people sometimes want to write notes using rich text, with bold, different fonts, indentation, bullets and the like. We've always used those effects ourselves just by writing the html tags in the note but that's obviously not everyone's cup of tea.

So, after a brief foray into the world of rich text editors, there seem to be two possible approaches:

  • Trust the browser, set the "contentEditable" property on a page element and just provide buttons and choices to expose what it is capable of.
  • Don't trust the browser and do everything yourself: record the cursor position and key strokes and modify the DOM tree accordingly.

Each has its pros and cons for the user. Browser support for contentEditable is variable and it only exposes a certain set of operations. But what it does is done at a pretty low level and very responsive. The DIY route lets you give a more uniform behavior across browsers and lets you give users choices that aren't supported with contentEditable. But on a slow machine the indirectness could make it sluggish in some cases, and when you're typing fast even a slight delay could be noticeable.

For the developer of course, there's a pretty big difference: in one case you're just adding some buttons to control the content editing API. The other involves writing a whole new DOM editor (though for A.nnotate a lot of that code is similar to what goes on with HTML text annotation already). Among rich text editors out there, NicEdit seems to take the first route and TinyMCE the second. Both make a very nice job of it.

For A.nnotate we settled on the first route since user demands for rich text in notes are likely to be fairly light compared with some other applications, and we hope that browser support will only get better with time.

Buttons at the top of the note editor switch between plain
and rich text editing.