Text annotator – an overview

What is it for?

Use the text annotator for written content that you want to add definitions, explanations, and notes to. It lets you highlight parts of a text and add annotations with various styling options.

How to get started

1

Choose the text annotation template starting point from the template chooser.

2

Find the piece of text you would like to annotate and enter it into the Text box in the Text settings panel.



TIP: You can add HTML and CSS to enhance your visualization further. Click here to find out more.

3

Make a note of the annotations you want to add to your text, we will add these in the Data tab.




4

In the Data tab, add the snippets of text you want to annotate from your chosen piece of writing and bind that to the Text column. Add your annotations into a column next to this and bind that column to  Annotations.

Text	Annotation
we'll not carry coals.	“Carry coals” was a proverbial phrase, meaning to submit passively to an insult or indignity.
No, for then we should be colliers	By saying this Gregory means that they won’t be cowards and shy away from any insults.
I mean, an we be in choler, we'll draw.	This is an example of wordplay. “Choler” was one of the four humours in early biology, also known as yellow bile, and thought to cause anger. Sampson is saying that they’ll “draw” their swords if they’re angry, or if they are in danger of becoming “colliers”– “choler” in this line recalls the “colliers” from the previous line.

5

If you want to annotate a specific part of the text that occurs more than once, you can add identifiers in your text. To use identifiers, wrap the text you'd like to annotate in square brackets and write the identifier in curly brackets next to it. Then, in the Data tab, supply the content to display with the word. 

For example: [Sam]{sam-annotation}

In the datasheet, you can write "sam-annotation" in the first column and the text to write as the annotation in the second column.



TIP: Use identifiers when you have annotation content that you would like to use more than once.

6

Once you've input your data, back in the Preview tab the text for which you've added annotations will be highlighted and circled, with annotations appearing to the right-hand side of the text. 

How to style your text and annotations

Now you have your annotations set up, you can change how the text and annotations are styled.

1

Under Text styling, you can customize the text alignment and how the highlighted text is displayed. 



For Highlight type, there are four options: handdrawn, background, text color, or underline. 



If you choose  handdrawn, you can choose between a few other handdrawn type options for styling your highlighted text. 



2

Under Annotations styling, you can choose where and when the annotations should display.



There are two Mode options: Side panel displays the annotations to the right-hand side of the text, while Inline blocks place them directly below the part of the text to which they apply.




Side panel






Inline blocks



There are settings to choose whether annotations appear Always or only On click, as well as some font settings. You can also add custom HTML and CSS in the Note content box. 

3

Under Annotations styling, when you are using Side panel mode there is also the option to set a different mode for mobile devices. Side panel mode is not always optimal for smaller devices, so you may want to use inline blocks, overlap panels, or even none to remove annotations on mobile.

4

As with our other templates, you can customize your visualization under Layout (such as adding a background image) and you can add headers and footers too.