Sidenotes

Sidenotes allows editors create Tufte-style sidenotes directly in body text using simple markup. Notes can be numbered or unnumbered, placed in the left or right margin, and render responsively.

Features

• Text filter that converts `[sn]...[/sn]` or `((...))` into sidenotes
• Left or right margin placement
• Responsive: notes may be rendered inline after the reference, or moved to an endnotes list. Inline references can be placed after the paragraph (default) or immediately after the reference. Responsive CSS with themable class names and CSS variables.
• Minimal JS to handle endnotes on mobile and reflow on resize. Desktop is css-only.
• Endnotes section title configurable, and endnotes will have backlinks added.
• Set default label style: Numbers, Symbols (*, †, ††, §, ¶, ‖, Δ, ◊, ☞), Custom, or None. This style will be used any time sidenotes are added to a page.
• Override default labels: sidenotes can be given any label on a per-note basis, or no label at all. Un-numbered sidenotes will not increment the numbering of the other sidenotes.
• Custom labels: define your own labels (e.g., [wik]) and use them as the label style. You can also choose what markup to use in the editor.

Usage

1. Install sidenotes as you would any other module.
2. Configure sidenote defaults at Configuration → Content authoring → Sidenotes (/admin/config/content/sidenotes).
3. Enable the sidenotes filter on the desired text format: Configuration → Content authoring → Text formats and editors. Edit your format and enable “Sidenotes (Tufte-style)”. Place the sidenotes filter after “Limit allowed HTML” and “Convert line breaks”.

Authoring

• Shortcode: `[sn]Your sidenote content[/sn]`
• Double parentheses: `((Your sidenote content))`

Overrides

To override whatever default number, symbol, or custom label would normally have been assigned to a sidenote, simply prefix your note content with the configured marker.

To make a sidenote unnumbered, add the marker (default `!@`). Unnumbered notes show a symbol in-text only, not with the note:

• [sn]!@This note is unnumbered[/sn]

To use a specific symbol for one note, wrap a code with the configured prefix/suffix (default `!code!`). Examples:

• [sn]!d!Dagger symbol note[/sn]
• [sn]!dd!Double dagger note[/sn]

You can also override a default symbol with a number:

• [sn]!1!Note with a 1[/sn]

And you can use any custom label as an override:

• [sn]!custom!Note with a custom label[/sn]

Overrides will not increment the numbering or order of the other notes.

Limitations

• Nested sidenotes are not supported.
• If you paginate or use multiple body fields, numbering resets per processed field, which is usually desired.
• Ensure your theme width has enough space for the margin column (space is reserved by `.sn-content` margins).

More Information

There are additional details in the module README.