Footnote backlinks are put in their own paragraph after elements other than <p>

[kylebarbour]

If a footnote ends on any element other than <p>, the footnote backlink is put on a paragraph by itself. For example:

Text. [^f1] [^f2] [^f3]

[^f1]:
    > This is a blockquote.

[^f2]:
    1. This is an ordered list.

[^f3]:
    * This is an unordered list.

generates

Text. ^{1 2 3 4}

1. This is a paragraph. ↩

2. 1. This is an ordered list.

   ↩

3. • This is an unordered list.

   ↩

4. This is a blockquote.

   ↩

The backlink is placed inside the paragraph at the end, but is put in a new paragraph for every other element type. I think it makes more aesthetic and semantic sense for each of these cases to have the behavior be the same as it currently is for paragraphs so that the backlink is on the same line:

Text. ^{1 2 3 4}

1. This is a paragraph. ↩

2. 1. This is an ordered list. ↩
3. • This is an unordered list. ↩

4. This is a blockquote.↩

[gettalong]

Hmm... I'm open for changes in this regards but don't know if your solution is better.

Maybe changing to a syntax similar to what Wikipedia does would be nicer (i.e. a caret after the number, then the contents):

1. ^ Citation

I we will have to check what other Markdown implementations do in this regard.

[kylebarbour]

That seems reasonable to me. For what it's worth, PHP Markdown Extra and Pandoc operate similarly to how kramdown works now, so that's not much help.

[gettalong]

Thanks for checking out PHP Markdown Extra and Pandoc!

[ccorn]

Such things can be fixed with CSS by absolute positioning. In a typical Jekyll setup, adding something like the following to assets/main.scss should produce footnotes whose backlinks are positioned near the lower right of the list items. You can even place them near the top left, if you want.

$footnote-margin: 3em;
div.footnotes {
  /* Insert your footnote style here: font size, border-top, padding-top and the like */
  > ol {
    margin-right: $footnote-margin;
    > li {
      /* Need a positioned ancestor for reference */
      position: relative;
      .reversefootnote {
        position: absolute; /* relative to the positioned ancestor */
        /* Try replacing right/bottom with left/top, that's cool too */
        right: -$footnote-margin;
        bottom: 0px;
      }
    }
  }
}

Because of position: absolute, the backlink does not take up space where it would normally be placed.

[kylebarbour]

That's an interesting solution - I don't use Jekyll but I see how that could potentially work although I haven't had a chance to play with it in my CSS.

One issue though is that that affects all footnotes, but I don't think there's anything wrong with the way kramdown renders them with most footnotes, just those ending with blockquotes and the like. I think there's a more aesthetically-pleasing solution but I could see a number of options being reasonable. Personally I think that having the footnote after the last item of text looks best, but I can see how that is maybe semantically not ideal. But it if that's so, to me it seems equally semantically nonideal to have it inside a paragraph... I don't know. Maybe footnotes ending on a non-paragraph could have some class specific to them that can be styled?

[gettalong]

@kylebarbour Adding a class to the added paragraph tag can easily be done, something like reversefootnote-wrapper?

Since the other proposed solutions have their own problems, would just adding the class be enough for your use case?

[kylebarbour]

Hmm, maybe. I messed around with this for a while and I came up with a pretty kludgy solution, but it's not great (and seems to require that there be a paragraph before every blockquote, ol, or ul for reasons I haven't figured out yet). It is pure HTML and CSS though. I've attached a working example of the kramdown, resulting HTML (modified to include the reversefootnote-wrapper proposal), and CSS:

test.txt
test-html.txt

Here's the relevant CSS. I tried to make it as specific as possible to avoid collateral damage, but haven't robustly bugtested it.

.footnotes > ol > li blockquote:nth-last-child(2) {
    display: inline-block;
    margin-top: -1em;
    margin-right: 0em;
}

blockquote > p:last-child {
    display: inline;
}

blockquote + p.reversefootnote-wrapper {
    display: inline;
}

.footnotes > ol > li ol:nth-last-child(2),
.footnotes > ol > li ul:nth-last-child(2) {
    display: inline-block;
}

ol + p.reversefootnote-wrapper,
ul + p.reversefootnote-wrapper {
    display: inline;
}

This changes this unmodified output to this more readable alternative (at least in my view).

So that could solve this for my particular use case, but I don't know if your thoughts are at all changed after seeing what the potential outputs could look like.

[gettalong]

Thanks for taking the time to investigate further!

From my point of view there are two solutions:

1. Just add the wrapper class to the added paragraph and let the user style it.
2. Add a new option 'footnote_backlink_inline` that adds the back link to the last paragraph of the footnote content, regardless of its nesting depth.

I'm inclined to go with the second solution since it doesn't need special CSS styling. What are your thoughts?

[kylebarbour]

No worries! Thanks for being such a responsive dev :)

I personally prefer the second solution if that works for you!

[gettalong]

Since you also prefer the second solution, I have implemented it now:

• Added a new option footnote_backlink_inline that defaults to false (current behaviour)
• If set to true, the backlink will be placed in the last, possibly nested paragraph or header.

Headers are treated like paragraphs in this context since the have the same "code and output structure".

Will be in the next release! Thanks for your contribution!