What is it for?
Use the Flourish text annotator template for text that you want to add an extra layer of context to. Our text annotator empowers you to highlight parts of a text and add interactive annotations with a host of styling options available in just a few clicks.
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, copy it and paste it into the Text box in the Text settings panel.
TIP: You can add HTML and CSS to the text and enhance your visualization even further. Click here to find out more.
- 3
-
Make a note of the annotations you want to add to your text.
You need to 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 in a column and bind it to the Text column.
Then, add your annotations into a column next to this and bind that column to Annotations. So each row contains the text and its annotation.
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. To do that, 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 that you have your annotations set up, you can change how the text and annotations are styled.
- 1
-
Under Text styling, you can customize the highlight alignment, highlight color, and the width of the main text container.
For Highlight type, there are four options of styling the highlights: handdrawn, background, text color, or underline.
If you choose handdrawn, you can opt between a few other handdrawn styles for styling the highlighted text, such as circle, background, box or underline.
- 2
-
Under Annotations styling, you can choose where and when the annotations should display.
There are two options, found under Mode settings: 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 also settings to choose whether annotations appear Always or only On click. Moreover, you can change the text size, width, text and background color of the notes.
In the Note content text box, you can add custom HTML and CSS and styling to the annotations.
Make sure to have {{NOTE}} in there, and then you can customize the annotations with the same styling options as a popup. In the example below, we chose to make the annotations italic.
- 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 screens, so you may want to use inline blocks or overlap panels.
Here is a small example of inline blocks and overlap panels while testing using the Flourish preview panel.
- 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.