Javascript, Text Annotations and Ideas

Question

I am very curious to hear input from others on a problem I've been contemplating for some time now.

Essentially I would like to present a user with a text document and allow him/her to make selections of text and annotate it. Specific to the annotations I aim to achieve the following:

1. Allow users to make a text selection, annotate it, then save the selection and annotation for reference later
2. (UI) Support representing overlapped annotations. For example if the string where: "This is the test sentence for my example test sentence", user1 might have an annotation on "is the test sentence for my example" and user2 might have an annotation on "for my example".
3. Account for a situations where the document's text changes. The annotations would to be updated, if possible.

How would you tackle this from a technical perspective?

Some ideas I've had are:

• Use javascript ranges and store an annotation as a pair of integers something like: (document_start_char, document_end_char). Save this pair in the db.
• Alternatively, using JS get the text selected and actually save the full text in the db. (not sure how i would then do overlapping annotations)
• Represent overlapped annotations by applying a css style to highlight the text then darken the "stack" of annotations where they overlap. Smallest annotation would always have to be on the top of the "stack".

What are your thoughts or areas of improvement? How the heck could i support a document's text being updated without breaking all the annotations?

Answer 1

I'm researching this same question and personally I favor staying away from rolling my own, in favor of an existing open source library like Annotator.

Answer 2

http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.html (404 response)

http://mark.koli.ch/2009/09/05/get-selected-text-javascript.html- (404 response)

Getting the selected text is really easy. Storing it (or its starting/ending points) is also a joke. But what about your point number 3? What if the text changes?

If the text changes, both the original text and the original selection coordinates you stored won't equal the current modified text. You should be aware of the annotations present in the text document, so that everytime it changes, the annotations referencing to that particular piece of changed text should be updated, or deleted (maybe after a quick comparison between the before and after text: are some words missing? or just some words have been corrected?), but this seems really a struggling task.

I think storing the entire text annotation in a db is essential, to avoid it being changed and the annotation lost. This way you will still have the complete text you annotated. Then you should also use a sort of flag to indicate the start character of the annotation, and if the text changes, you could calculate the difference in characters from the document text before the change, and the one after it, and find this way the new starting point of the original annotation (assuming the annotation part of the document text has't changed).

Dividing the text document in as many paragraphs as possible should also help, this way you could separate different pieces of the document and work on one by one.

Now I would really like to see it done! :)