Text Annotations & Highlights

Disclaimer

For any of the following features to work the text that is going to be enhanced has to be selected in the classic/old Presto story editor and formatted as print_infobox.

In the new Presto story editor, print_infobox is an advanced feature applied to the whole paragraph. To target specific words or phrases, the text within a print_infobox should be bold.

Old Presto	New Presto

Notebook

In a story with lots of recurring characters or organizations, how can we help readers keep track of different people or other entities moving in and out of the story?

Notebook provides a way to create a persistent reference within a story. By default, it's a modal tray that slides in from the right, with each entry displayed in a list.

This presentation works especially well for stories where relationships matter and where it helps to see all the characters at once.

When adding a notebook, keep in mind that we can't guarantee readers see it. People miss links or ignore them. Highlights also won't show up in AMP or the USA Today app. If something is critical to a story, put it in the story.

An open notebook tray.

Main tray configuration options

value	purpose	required	default
label	Text label at the top of the notebook tray, next to the close button.	No	none
title	This is the large, bold title at the top of the tray.	No	none
description	Introductory paragraph above the tray entries.	No	none
theme	Set the theme to light — dark text on a white background — or dark — the reverse. This must be set seperately from the article theme.	Yes.	light
enableLine	If set to true, Adds a vertical line connecting the item dots. This visual flourish is good for timline-esque applications.	No	false
subscriberOnly	When set to true, only logged-in subscribers can see tray contents; non-subscribers will see a subscribe CTA.	No	none
subscriberOnlyText	Optional replacement text for the subscribe CTA default of "This content is available to subscribers only."	No

Entry configuration options

Each entry supports several related options. In their most basic form, notebooks can be used as glossaries. With a little extra configuration, this can become a sidebar timeline.

value	purpose	required	default
name	The highlighted text in the story that triggers the notebook tray. This value must match the text exactly to be connected to the links in the story.	Yes	None
second_reference	Alternate trigger phrase (i.e. name value), such as a last name or an acronym.	No	None
headline	A headline for the entry.	No	The value of name
label	Bold prefix to the content, followed by a colon.	No	none
content	A one-paragraph blurb for the entry.	Yes	None
image	Absolute url of an image on the CDN.	Yes, for images	None
image_alt_text	Good, descriptive alt text for the image.	Yes, for images	None
link	A link to a related piece of content.	No	None
link_text	Text for related link.	No	"More:"

Example configuration

This will create a new Notebook with a title of "The Miller Family" and three entries.

{highlights.notebook}
title: The Miller Family
description: This is an introductory paragraph. Deck ipsum dolor sit amet, consectetur adipiscing elit ut aliquam  purus sit amet luctus venenatis, lectus magna fringilla ur porttitor rhoncus dolor purus non enim praesent elementum.
theme: dark
enableLine: true

[.entries]

name: Foo Bar
label: May 20, 2014
content: Deck ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis

name: Baz Bop
label: May 21, 2014
content: Deck ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis
image: https://picsum.photos/id/900/1600/900
image_alt_text: An image of Baz Bop

name: baby shark
label: May 22, 2014
content: Deck ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis
image: https://picsum.photos/id/901/1600/900
image_alt_text: An image of Baz Bop
link: https://www.usatoday.com
linkText: More info
[]
{}

Analytics

Event	Action	Category	Label
Extra link in entry is clicked	{outbound/inbound} links	noteboook	to: {url}
Link in story is clicked	content	notebook	{entry name/title}
Notebook tray is closed	content	notebook	notebook closed

Glossary

Glossary highlights work much like Notebook, except the context is added inline.

Here's an example: https://www.usatoday.com/in-depth/news/world/2019/10/10/trumps-biden-ukraine-natural-gas-conspiracy-theory-false-but-alive/3851728002/

This works best for information that adds useful context about a specific word or phrase. It's a good place to put background information, or something that's tangential but interesting.

When adding a glossary highlight, keep in mind that we can't guarantee readers see it. People miss links, or ignore them. Highlights also won't show up in AMP or the USA Today app. If something is critical to a story, put it in the story.

An open glossary item.

Glossary configuration options

value	purpose	required	default
term	The bracketed text in the story that triggers expansion of the definition.	Yes	none
title	Bold title text.	No	none
context	Italicized text, following the title.	No	none
content	The definition for the glossary term.	Yes	none
image	Absolute url of an image on the CDN.	No	none
link	A link to a related piece of content.	No	None
linkText	Text for related link.	No	"More:"

Example configuration

Use the following config to add it:

[highlights.glossary]
term: Foo Bar
title: Lorum Ipsum
context: Placeholder text
content: Deck ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis

term: Baz Bop
content: Deck ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis
image: https://picsum.photos/id/900/1600/900

term: baby shark
content: Deck ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla urna, porttitor rhoncus dolor purus non enim praesent elementum facilisis leo, vel fringilla est ullamcorper eget nulla facilisi etiam dignissim diam quis
image: https://picsum.photos/id/901/1600/900
link: https://www.usatoday.com
linkText: More info
[]

Color Highlights

Color highlights allow you to set a custom background or text color for a span of text.

This is useful where you have a chart or other visualization, and the body text can act as a legend.

Text color and background color

Glossary configuration options

value	purpose	required	default
text	The text in the story to be highlighted.	Yes	none
text_color	A valid CSS color to be applied to the text.	No	none
background_color	A valid CSS color to set the background color of the highlighted text.	No	none

Example configuration

Use the following config to add it:

[highlights.colors]
text: more than $600,000
background_color: #F58B85

text: $1.2 million
text_color: #AD1E19
[]

If not specified, text color is set to white or black automatically, depending on the background color.