Stacks Image 100

FootNoter2 Stacks

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

The FootNoter2 Stacks make 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 Footnoter2 (main text) stack. In here, the references* to the footnotes are made and numbered automatically*.
  • The Footnoter2 (footnotes) stack where the footnotes reside.

Demos
Beside the FootNoter2 Stacks 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 Footnoter2 (main text) stack above the Footnoter2 (footnotes) stack. Always use the two stacks together, but only one set per page.

In the Footnoter2 (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 FootNoter2 (main text) stack and the FootNoter2 (notes) stack are done in the FootNoter2 (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*.

To add footnotes in the Footnoter2 (footnotes) Stack, click the plus button at the bottom 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.
  • Non of the settings in this stack will show in Edit mode.
  • Depending on the theme settings, the outline of the references (that show when going back to the reading position) may be cut off a little. In that case, you will need to fiddle with the width and padding of the outline (or the line height of the text) to prevent this.

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

These stacks require RapidWeaver (version 7 or higher) and the Stacks plugin by YourHead (version 3.5 or higher).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
FootNoter2 (main text) HUD
Footnoter (main text) 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. 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)
  7. The focus does not work in Internet Explorer (any version), nor in mobile browsers.
  8. 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.
© 2012-2019 Marathia Web Design | Contact