Footnotes in Markdown

I started before the weekend with five things to sort out about a blog page on a web site. I only have one left (for now), thanks to the help and generosity of the developers here.

This is about formatting footnotes. The page is built with Poster 2 and Source.

Here is a test page, to show how the footnotes appear. I sort of expected them to be superscript. They are hard to spot. A brighter link colour would help. But is there any way to make them superscript?

The Markdown Extra section on footnotes shows them as superscript.

I am not sure if this is related to Post 4067 - Try to use footnotes in the Markdown(Source) stack.

I tagged this for Stuart, because the markdown file on the server is rendered by a Source Markdown stack, but it might not be the stack that is the issue. That’s above my pay-grade, I’m afraid.

Perhaps there is some html or css that can target them?

Many thanks in advance .

Fergus

Are you using Poster Stack markdown folder integration? Then markdown is rendered by Poster Stack. At least for the blog posts.

Hi Fergus, it is indeed a RW-thing. Using Markdown via a markdown folder will solve this. You can use MAMP to check it on your mac in stead of on a remote server.

greetings dirk

2 Likes

Exactly this library is used by Poster Stack for rendering. You will be able to style the numbers via the sup a tag.

sup a {
    color: red !important;
}

A great way to handle footnotes — which works beautifully with Poster — is to use BWD’s PopDrop. For me, the ability to have a note appear where it is noted is where the web demonstrates its advantages over print. Being old-skool, and anal, I also like to have notes in superior figures — which many fonts now have — rather than mechanically adjusted superscript. It took a bit of figuring out to get PopDrop to work with “sups”. And also to disappear the note and close the gap on mobile. But the result is a delight (and I’m happy to share the hack with anyone who is interested).

[PopDrop also has the lovely feature that, if the note is below the centre of the screen, it opens in a ‘tool tip’ above it, and if it is above the centre of the screen, it opens below. One of those little bits of perfection in Andrew’s work which often go unrecognised!]

4 Likes

Gosh. Thank you everyone. I’ve marked @Jannis’s reply as the solution, because I am using a folder of Markdown files in Poster 2, so with the “sup a” hint, I was able to get exactly what I wanted with this code:

sup a {font-size: 85%; line-height: 0; position: relative; vertical-align: baseline; top: -0.5em; color: red !important;}

That reduces the footnote number a little, makes it superscript and red, which is exactly what I wanted.

@Sprmte Dirk, many thanks. I use MAMP every day, more or less, and it saves hours. If only it allowed one to ‘load’ a library of web sites, and select one at launch, rather than having to navigate from one folder to another to check a different website, it would be perfect.

@jamessouttar, I haven’t had much occasion to use PopDrop. I must investigate. Thanks for reminding me of it.

2 Likes