Inline Notes

Inline notes are an alternative to footnotes. When you click on a highlighted phrase, you get the inline note added to the paragraph right after the phrase.

For example, here's an inline note This is an inline note. You can put any additional information here that provides context or explanation for the highlighted phrase. Or add anything else that's not relevant to the main plot. [close] . You can have all the notes you want within the same paragraph Like this one here. [close] .

How they work

• When clicking on a phrase, the inline note is displayed right after the phrase.
• Phrases that open inline notes are identified clearly. For example, I used a dashed underline. This way, users know that they won’t navigate out of the website. The web has too many hyperlinks, making readers having to constantly think whether to click or not, which makes for a less enjoyable reading experience.
• Inline notes have a distinctive style, different from the surrounding text.
• You can close inline notes by clicking on the highlighted phrase or by clicking on “close” or other similar markers.

When to use inline notes

Inline notes are ideal for mobile reading, where space is limited, but they work well for all kinds of text on interactive devices. For many use cases, they are better than the alternatives.

• Footnotes (end notes on the web) make you navigate out of the current position, making you lose the context in which the phrase was used.
• Side notes are not mobile-friendly.
• Modal notes (like a popup, for example) make you lose the context, since you are unable to navigate on the original text until you close the modal.

With inline notes, the additional information blends directly into the text.

Inline notes are not suitable for long text, though, but having very long text on a note is never a good idea. Another weakness is that they rely on interaction instead of visualization (you need to click, you can’t just glance as you would with side notes).

Implementation details

Inline notes are implementation-agnostic. You don’t need JavaScript. I used only HTML and CSS, using the checkbox-hack.