Footnote support in editor

The solution posted above by @Cathy_Sarisky works well. I’ve been using it for 6 months with hundreds of footnotes without an issue. A significant proportion of my newsletter readers click through to the Javascript-enabled browser version to read it.

I periodically include a callout that reminds readers that the {{3}} squiggle-enclosed text are footnotes.

I compose offline in Obsidian, then process the Markdown with a perl script to change the embedded footnotes to format them for the solution @Cathy_Sarisky uses … this allows me to simply type some text {{456 Here is a footnote}} and have it correctly converted to some text {{1}} with the footnote added at the bottom of the page.

I use squiggles (braces??) rather than [[square brackets]] as Obsidian uses these for internal linking.

1 Like

Are there any new features coming up for footnotes?

1 Like

Hi @Cathy_Sarisky thanks for this, it works well for me! Only a question though. The [[1]] does not seem work in a block quote. Why? I can make it work if I use Markdown, but I liked your code injection solution because it allows me to just use the editor. Am I missing something?

Hey @Fedg ,

You just need to update this line:

document.querySelectorAll('article p, article li, article figcaption, article .kg-callout-text').forEach(element => {

to include blockquotes. That probably means adding article blockquote to the list, but if that doesn’t work, feel free to link the site.

1 Like

Just to add my voice to this thread, seamless and full footnote support should be considered one of the best features a CMS like Ghost could offer to writers. A flagship feature.

I am literally in the process of writing something where I am essentially including some footnotes in long parenthesis, during writing, because I know my CMS can’t properly support adding them without hacks, and there might be something in the works soon, and that solutions suggested are JavaScript-based workarounds which break the format I am writing in, for portability to publish to other platforms, etc. It’s destructive to the writing process (to either not bother expanding on a point to avoid the footnotes issue, or lose a concise flow of argument by including them).

2 Likes

Completely agree.

I’ve resorted to just putting in the details at the bottom of the post - not ideal. Here’s a great example.

1 Like

Thanks! That is a great example in how to format references in a visually appealing way, even if it lacks the convenience of linking. It looks pretty perfect for links to external sources, though less usable for prose-style footnotes (interesting notes and asides).

I am actually a developer and have made a solution for this today, which I’ll post below. Basically what this JavaScript does is take all the section-based footnotes from various Markdown cards (if there are multiple; if not it does nothing), re-numbers them then moves every footnote into the last footnote section).

So basically on the front-end and for visitors viewing the article via the web page, it restores how Markdown footnotes would have appeared before in Ghost, but allowing posts to be broken across multiple cards to use all the fancy embeds and callouts, too. Just the simple footnotes that Ghost generates, and with the standard Ghost styles (I prefer these vs. pop-ups).

If anyone wants to use on their theme, paste it into your post.hbs file of theme, after </main>. You could actually also paste it into the “footer embed” field in admin. It will load on every page that way, but only actually does anything when you’re viewing a post with multiple footnotes due to the Markdown cards issue. It’s a slightly more optimised way adding to post.hbs, but I’d recommend just pasting into the footer embed box for non-coders.

Also @Ghost Team, I’d suggest that since the CMS is in Node you could apply this code with minimal tweaks to the core as a filter after body HTML is generated. That would be the real fix, so the Footnotes are served in the correct format from the back-end (RSS readers, emails, etc). — I suspect the new Footnotes will not be Markdown based, in which case this would still be a good fix so writers can use the old MD-based footnotes without limitations, if they prefer.

Feel free to post feedback or suggestions! I’ll tweak it if needed.

Update: I applied a fix to the below after testing on my first real world post. It now always moves the combined footnotes to the very bottom of article.

<script>
    // footnotes fixer
    (() => {
      const container = document.querySelector('.gh-content');
      const fnSections = container.querySelectorAll('.footnotes');
      if (!fnSections.length) return;

      if (fnSections.length > 1) {
          // re-number footnotes
          const fnRefs = container.querySelectorAll('.footnote-ref a');
          fnRefs.forEach((ref, index) => {
            const fnIndex = index + 1;
            const note = document.querySelector(ref.getAttribute('href'));
            ref.textContent = `[${fnIndex}]`;
            ref.href = `#fn_${fnIndex}`;
            ref.id = `fnref_${fnIndex}`;
            note.id = `fn_${fnIndex}`;
            note.querySelector('.footnote-backref').href = `#fnref_${fnIndex}`;
          });
      }

      // combine all into last footnote section, move that to end of article
      const lastSection = fnSections[fnSections.length - 1];
      const lastListFirstItem = lastSection.querySelector('.footnote-item');
      fnSections.forEach((section, index) => {
        if (index === fnSections.length - 1) {
            container.appendChild(section.previousElementSibling);
            container.appendChild(section);
            return;
        }
        section.querySelectorAll('.footnote-item').forEach(item => lastListFirstItem.before(item));
        section.previousElementSibling?.remove(); // remove hr.footnotes-sep
        section.remove();
      });
    })();
</script>
2 Likes

I’m not sure why there’s no reply here from Ghost on a topic with a shown interest since 2018. In short, the above code shows the way to make footnotes added across Markdown cards fully functional in a simple way (which it is currently not, and clearly other users value this lost functionality—for example with the above snippet, you would need to remember not to email posts that include footnotes).

Footnote: just to say, I want to express this interest in footnotes in a positive way. I think footnotes are an exciting and transformative feature for many writers who will disproportionately fall into Ghost’s demographic, even if for others they might sound inessential. The need to back-up factual statements with references speaks for itself, but also in more prose-like forms, the ability to expand on a thought with an aside that some readers might find deeply interesting, but would destroy the flow and focus of an article if put in the body in any form can be used brilliantly. See David Foster Wallace, he knew this well. I really believe this is a feature Ghost is uniquely positioned to do amazingly well, and will be a “this is the one” moment for many writers and publishers looking at the CMS landscape and deciding where to go (from WordPress, for example).

4 Likes

Hi again Cathy. I have a couple of questions about your footnotes solution and more. What’s the best way to reach you?

yeah, the lack of footnote support is the reason why I still haven’t switched to Ghost. I use footnotes a lot in WordPress

1 Like

I couldn’t have said it better!
I’m getting disillusioned with Ghost :pensive_face:

If this gets implemented, I noticed a problem in Ghost on two fronts here:

  1. The Markdown-to-HTML mechanism in Ghost puts square brackets around the superscript numbers. This is IEEE Style [1]. This is Chicago Style.² The superscript square brackets are only a quirk of Wikipedia—not Markdown and not how 99.9% of how most books and journal articles are published.
  2. The superscript and subscript on most websites, including all of those made with Ghost, will mess up the leading (spacing between lines) with the superscript and subscript HTML tags (instead of the “pre-composed” Unicode character for ² in my earlier example). They should look the same as each other. Neither should affect line spacing. I wrote it about here on the forum under Bugs.