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?

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?

• javascript
• user-interface
• annotations
• document
• text-parsing

• I have EXACTLY the same requirement. Pls keep us updated on ur progress SP – swami Commented Aug 20, 2011 at 6:36
• What im doing at the moment is surrounding every single character in a span with a unique ID. I use Rangy (code.google./p/rangy) to grab selections then extract the IDs so i know exactly which characters have been selected. Doing this allows me some freedom because i have have over lapping selections and can do some fancy stuff behind the scenes like calculate how many times a character has been annotated in a SUITE of annotations and adjust it's background color accordingly (to represent overlapping selections). – Mario Zigliotto Commented Aug 23, 2011 at 3:42
• Oh i forgot one thing... I have yet to figure out how to handle updating all annotations when the document itself is Edited, but i'm THINKING that a good way to go about it might be to divide the document up into unique paragraphs, or sentences or something like that. Isolating damage would be the goal in that case but it wouldnt be perfect. – Mario Zigliotto Commented Aug 23, 2011 at 3:43

2 Answers 2

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.

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 parison 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 plete 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! :)