HTML Footnote Manager

This is an extension for the MacOS Nova editor to manage links from footnote references to footnote definitions, and back, in HTML documents.

Usage

• Position the cursor where you want to insert a footnote, and type the keyboard shortcut for the extension (default: ctrl-f).
• If no text is selected, type or paste the footnote text at the prompt. Otherwise the selected text is used as the footnote text.
• The extension inserts HTML code for a placeholder footnote number at the insertion point, replacing the selected text (if any).
• The extension adds a <div> containing the footnote text to the footnotes section of the document.
• The footnote number at the insertion point is a link to the footnote body, and the footnote body ends with a link back to the insertion point.
• When the page is rendered by a browser, a separate JavaScript (supplied) replaces the placeholder footnote numbers with actual values based on the order in which they appear in the document, and reorders the divs in the footnotes section to match.

Features

• Footnotes may be added to a document in any order, and the final sequence in which footnote references appear, from top to bottom, determines their ordinal numbers rather than the sequence in which they were added.
• Supports multiple footnote numbering styles: superscript, bracket, asterisk, dagger, and dingbat. See Reference Styles below.
  • However, mixing styles within a single document will lead to undesireable effects. The first footnote reference determines some, but not all, of the footnote formatting for the whole document.
• Preserves code indentation structure within the footnotes section, provided the <section> tag is the first tag on a line.
• CSS classes for selecting footnote numbers in the body of the text or at the beginning of each footnote <div>, as well as for the return links at the end of each footnote <div>. See CSS Classes below.

Configuration

Keyboard Shortcut

The default keyboard shortcut for creating a new footnote is ctrl-f. It can be changed in Nova’s Settings > Key Bindings pane.

Reference Styles

Footnote reference numbers are superscripts by default, but several alternatives are available in the extension's Settings pane:

superscript The footnote reference is a superscripted number. Each footnote div is prefixed with the footnote number and a dot. bracket The footnote reference is an in-line number enclosed in square brackets. Each footnote div is prefixed with the footnote number enclosed in square brackets. asterisk The footnote reference is a superscripted string of asterisks, with the ordinal position of the footnote determining the number of asterisks. Each footnote reference is prefixed with the corresponding number of asterisks. dagger Like asterisk, except use daggars (†) instead of asterisks. The second footnote uses double-dagger (‡), but then it's multiple regular daggers all the way down. dingbat Uses a set of "writerly" dingbats (✍, ✎, ✏, ✐, ✑, ✒). If there are more than six footnotes, the dingbats are doubled (✍✍, etc), tripled, ... as necessary.

Usage

Create an empty <section> element in the HTML document you want to add footnotes to.

Make the id of the section "footnotes":

<section id="footnotes">

</section>

If the <section> tag is the first text on a line, its indentation will be used to indent the footnote divs that get added to the section.

Each footnote div is preceded by a blank line and added on the line just before the closing </section> tag. Including one blank line in the empty section as shown above will cause each footnote div to have one blank line before and after it. This is all about code formatting, and has nothing to do with how the footnote divs are formatted when the page is rendered.

The footnotes section normally goes at the end of the document, just before the </body> tag, but using that position is not a requirement.

Add the supplied footnotes.js to the HTML documents.

This is the code that replaces the placeholder text generated by the extension with the formatted references and, if necessary, reorders the divs in the footnotes section to match the reference order.

You can find footnotes.js in the top level of the installed extension. (It is not in the Scripts subdirectory because it's not used directly by the extension's code.):

On macOS, this is normally: ~/Library/Application Support/Nova/Extensions/com.cvickery.footnote_manager/footnotes.js

Copy the footnotes.js file into your project and reference it in the usual way, such as:

<script src="./my_scripts/footnotes.js"></script>

Creating Footnotes

To add a footnote to your document:

• Position the cursor where the reference will go.
• Either type the text for the footnote and select it, or leave the selection empty.
  • HTML tags are allowed in the footnote, except <section> and </section> tags.
• Use the keyboard shortcut (default ctrl-f) to create the footnote.
  • If nothing is selected, you will be prompted to type/paste the footnote body.
• Instead of typing ctrl-f you could:
  • Use the Editor → Make Footnote menu item; or
  • Open the command palette (⌘⇧P) and type Make Footnote

CSS Classes

There are four classes that can be used for selections:

.fn-ref This selects the <span> that contains the links from the body of the document to the footnote <div>s in the footnotes <section>. For example, to remove the underline from the links:

.fn-ref a {
  text-decoration: none;
}

.fn-def This selects the <div>s that hold the footnotes’ text (“definitions”). The first element in each footnote div is a span that holds the formatted footnote number (or asterisks, daggers, etc.). For example, if you want to manage the space between the formatted number and the text of the footnote, you could use:

.fn-def > span:first-child {
  margin-right: 0.5em;
}

.fn-def-num This selects a span inside the span used in the previous example. This span contains the actual footnote number without including any brackets or dots that might be surrounding or following it. The one use case I am aware of for this selector is when using dingbats, which are sometimes hard to see and even sometimes seem to have differing rendered widths from one another. This is the fix for that issue:

/* Possibly useful for dingbat style */
.fn-def-num {
  font-family: ui-monospace, monospace;
}

.fn-ref-link This selects the links at the end of the format divs that go back to their footnote references. The default text for those links is '↩', so you could change it to something different using JavaScript:

document.querySelectorAll('.fn-ref-link').forEach(a => {
    a.textContent = 'Click here to go back to the reference point!';
});

Internals

This information should not need be needed in order to use the extension. But it does document two data-* attributes that cannot safely be used in footnote definitions.

Every footnote is assigned a unique ID: the millisecond timestamp of when it was created. This timestamp ID is used for creating the links between footnote references to the footnote definition divs and back. Two data-* attributes are used: data-fn-id, with the timestamp ID as its value, and data-fn-style, with the formatting style (superscript, bracket, etc.) as its value. As implied previously, the data-fn-style attribute is attached to each footnote reference, but the value of only the first instance on a page is used for the entire document. Hence, changing the format style between footnote additions to a document is an ill-advised practice.

Version 1.0

Initial release