View on GitHub

Text Annotator

Small and simple JS tool for making powerful underline, highlight and strike text annotations

Download this project as a .zip file Download this project as a tar.gz file

textAnnotator

It is a small and simple JS tool for making powerful underline, highlight and strike text annotations

What It Can Do

Squiggly underline (and other types), highlight or strike text.
Annotated selected text (if rangy included).
Any color you want.
Extensible templates
IE9+, Chrome, FireFox, Andorid 4+, iOS are suppoted.
IE6+ support can be implemented (using Raphael.JS)

Take a try:

Select text and press underline, highlight or strike

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

How To Use:

Download
For basic functions add links to the following css & js files:
- css/annotator.css
- build/annotator.min.js
For extended features and possibilities:
- Rangy framework
- js/AnnotatorExtra.js - for some extra templates

Squiggly underline example and some others

var u = new tvs.Annotator();
u.underline(element1, 'solid', 'red');
u.highlight(element2, 'brush', 'green');
u.strike(element3, 'dashed', 'blue');

Annotation using attributes

You can do it like this:

<span>Examples of text
    <span data-annotate='underline squiggly red'>to be underlined</span>, 
    <span data-annotate='highlight brush green'>to be highlighted</span>,
    <span data-annotate='strike dashed blue'>to be striked</span>
</span>

Then add to code:

var u = new tvs.Annotator();
u.annotateDocument();

Custom templates:

Use JS code to add new templates:

tvs.AnnotatorDictionary.svgTemplates['custom'] = new tvs.Template(new tvs.SvgTemplatePart(
    '<line y2="3" x2="4" y1="3" x1="0" ' +
        'stroke-dasharray="2, 2" ' +
        'stroke-width="2" stroke="{0}" fill="none"/>', // svg content
    4,                                                 // width of canvas
    5,                                                 // height of canvas
    'repeat'                                           // apply method
))

More detailed docs...

... are in progress and will be available later!