title: Javascript, Text Annotations and Ideas
body: <p>I am very curious to hear input from others on a problem I've been contemplating for some time now.</p>
  
  <p>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:</p>
  
  <ol>
  <li>Allow users to make a text selection, annotate it, then save the selection and annotation for reference later</li>
  <li>(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".</li>
  <li>Account for a situations where the document's text changes.  The annotations would to be updated, if possible.</li>
  </ol>
  
  <p>How would you tackle this from a technical perspective? </p>
  
  <p>Some ideas I've had are:</p>
  
  <ul>
  <li>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.</li>
  <li>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)</li>
  <li>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".</li>
  </ul>
  
  <p>What are your thoughts or areas of improvement?  How the <em>heck</em> could i support a document's text being updated without breaking all the annotations? </p>