Posted by on Jun 30, 2014 in Uncategorized

Tappable-FootnotesTypeEngine’s new footnote feature allows you to easily add stylish footnotes to your articles, and stylize them using CSS and the App Styling JSON for your publication. As you add footnotes, they are automatically numbered in ascending order, and displayed as ¬†numeric footnote links.

Adding footnotes to your Article

Using the Helper in your article editor, you can use one of the two following options to add a footnote:

Add Footnotes

This is the simplest option, and involves simply adding the footnote content to the “Footnote Text” field and pasting the resulting Markdown directly into your article where you want the footnote to appear. There’s no need to worry about ordering, labelling or identifying your footnotes. The app will do it all for you, and display each footnote, as a numerically ordered link.

Add Footnote Reference

Use this option if you would like to keep the Markdown for your article a little more organized. There are two fields to fill in. The first, “Reference Name” Contains your internal identifying name to link the footnote to its content. It won’t be displayed to the reader at any time. “Footnote Text” contains the actual content of the footnote. Once you complete the Helper, you’ll have generated some code that looks something like this:

[^FOOTNOTEid]: This is the content for the footnote

Paste this entire piece of markup anywhere in your article. It doesn’t matter where you paste it, it won’t display and will appear at the end of the article body in your HTML.

Then paste the first part: [^FOOTNOTEid], without the colon, exactly where you want the footnote to appear within the article, and Voila! the app will take care of the rest.

Footnote Content

The footnote content is displayed as part of the app and its display properties are styled in the Apps JSON settings itself. The settings you will need to be aware of are found in detailed JSON settings documentation.

Footnote Links

The actual link to the footnote within the article can be styled using CSS in the Article Template. The class you are going to want to be aware of is the: a.footnote class. Modifying the styling for this class will change the way your inline footnote links are displayed.

Advanced Footnote Formatting

Maybe you prefer to not use numbers for your footnotes. Let’s say you have a footnote icon you’d like to use instead. Here’s how you might replace the automatic numbering that TypeEngine generates with a custom icon:

a.footnote {
  background: url(../img/footnote.svg) no-repeat 8px 7px;
  margin: 0 0 0 5px;
  padding-right: 10px;
  opacity: 0.5;
  display: inline-block;
  text-decoration: none;
  border: none;
  height: 22px;
  width: 47px;
    text-indent: 9999px;
    white-space: nowrap;
    overflow: hidden;
    content: "";

Assuming you have a custom SVG footnote icon named footnote.svg in your /assets/img/ folder, it will give you something in your article that looks like this: