FootNoter stack

FootNoter Stack

A set of two stacks to create old school bookmarks with ease

The FootNoter stacks makes it possible to create automatically numbered references linking to their corresponding footnotes – and vice versa. Much like Wikipedia does it, but without those annoying ‘reference tooltips’.

This set consist of two stacks:
  • the Footnoter (main text) stack. In here, the references* to the footnotes are made and numbered automatically*
  • the Footnoter (footnotes) stack where the footnotes reside

Demos
Beside the FootNoter Stack being used on this page, I’ve created two more demo pages:
Demo #1: a more colorful example with the ‘back to reading position’ links between brackets.
Demo #2: an example of the references not being superscript, but (just like the ‘back to reading position’ and ‘back to the top’ links) between brackets; the ‘back to reading position’ links before the footnote text.

Usage

Drag a copy of each stack on your Stacks page, the Footnoter (main text) stack above the Footnoter (footnotes) stack. Always use the two stacks together, but only one set per page.

In the Footnoter (main text) stack, insert one of the following immediately after the text where you want a reference to a footnote to appear (without a space between the text and the reference):
  • a random text (even a space will do), select it and apply Format > HTML > Superscript or
  • the code
    <sup></sup>
    . In a styled text area, don’t forget to apply Format > Ignore formatting
The text used in the references will be automatically replaced with numbered footnote tags. Keep in mind the search engines will read the text you entered*!
If the theme used doesn’t render superscript properly*, you can select the override font size and/or override vertical position options and tinker with those settings*.

All the settings for both the FootNoter (main text) stack and the FootNoter (notes) stack are done in the FootNoter (main text) stack*.

Optionally, you can set a link to go back up to the reference. Clicking that link will not only take you there, but the reference can also receive focus, making it more clear for the reader to continue reading from the point they went down to the footnote* *.

As a bonus, you can use a ‘back to the top’ link at the bottom of the footnotes*.

In the Footnoter (footnotes) stack, set the number of footnotes you want to use. Drag a built in Text stack (or HTML stack)* in each drop zone and type the text of the footnote. Because each footnote has his own stack, footnotes can be rearranged, duplicated and deleted easily.

Background
This stack is based on a heavily adapted version of footnoted.js v1.1 by Jacob Heftmann.

Limitations
  • When the visitor has JavaScript disabled in his browser, the stack will not work properly.
  • When clicking anywhere on the page while a reference has focus in RapidWeaver Preview mode, the outline sometimes does not disappear completely. I have no idea what's causing this, but it happens only within RapidWeaver (not in any browser).
  • Non of the settings in this stack will show in Edit mode.

Support
Please use this form to report all issues, questions and comments.

These stacks require the Stacks plugin by YourHead (version 2 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
FootNoter (main text) HUD
Footnoter (main text) stack settings

FootNoter (notes) HUD
Footnoter (footnotes) stack settings
  1. A reference in this context is the superscript number that’s a link to the corresponding footnote
  2. The numbering can start with any number between 1 and 999, so it’s also possible to spread a big footnoted text over several pages.
  3. For this reason, I personally prefer to use an asterisk (*)
  4. You can even make the references look like ‘normal’ text, although you still have to tag them as superscript. See demo #2 for an example.
  5. Because Internet Explorer has its own way of rendering superscript, the custom settings for the superscript are disabled in that browser (any version).
  6. One exception: in the FootNoter (notes) stack, you will need to set the number of footnotes needed (maximum 100).
  7. The color and the width of the focus is adjustable, but I suggest you don’t make it too wide (1 or 2px looks best to me)
  8. The focus does not work in Internet Explorer and Opera (any version), nor in mobile browsers.
  9. The ‘back to the top’ link takes you back to the top of the Footnoter (main text) stack, not to the top of the page.
  10. Many other stacks will work too, but try not to make things too complicated or the FootNoter stacks may break.
© 2012-2017 Marathia Web Design | Contact