how to create a epub annotation with save option within the Epub

Question

I have developed an web-based e pub reader, I want to add a commenting feature to that like adobe PDF reader commenting feature, so that the comments should save within the e pub if I will open that e pub in other e pub reader I could see the comments.

Answer 1

Modifying the XHTML

The first appoach is to rewrite the XHTML to include the comment, and rebuild the EPUB. It probably makes sense to use the <aside> element for the notes, along with an epub:type='footnote' attribute. If you then add a link to the page somewhere (such as around the text to which the comment relates) with the epub:type='noteref' attribute, then iBooks will do the right thing. See http://www.pigsgourdsandwikis.com/2012/05/creating-pop-up-footnotes-in-epub-3-and.html.

<p>This sentence contains a 
    <a href="#note" epub:type="noteref">commented phrase</a>.
</p>
<aside id="note" epub:type="footnote">This is the comment.</aside>

However, there is no standard markup that will work in all ebook readers. The best you can do is to add script which pops up the relevant note, but this obviously will only work in scripted EPUB3 ebooks read on a reader which runs scripts.

Using CFIs in a separate file

A possible alternative which avoids having to rewrite the XHTML files is to hold the comments in a separate file, and link them to the relevant text using Canonical Fragment Identifiers (http://www.idpf.org/epub/linking/cfi/). But of course you'll still need script to make everything work. A file might look like:

<comments>
    <comment>
        <cfi>/6/4[chap01ref]!/4[body01]/10[para05]/3:10</cfi>
        <text>This is the comment.</text>
    </comment>
</comments>

You can find a prototype implementation of CFIs at https://code.google.com/p/epub-revision/source/browse/trunk/src/samples/cfi/epubcfi.js, but you will still have to write the glue around it.