New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kylebarbour opened this Issue Sep 20, 2017 · 10 comments

Comments

Projects
None yet
3 participants
@kylebarbour

kylebarbour commented Sep 20, 2017

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. ↩

    1. This is an ordered list.

    • This is an unordered list.

  2. 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. ↩

    1. This is an ordered list. ↩
    • This is an unordered list. ↩
  2. This is a blockquote.↩

@gettalong gettalong self-assigned this Sep 20, 2017

@gettalong

This comment has been minimized.

Owner

gettalong commented Sep 20, 2017

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

This comment has been minimized.

kylebarbour commented Sep 21, 2017

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

This comment has been minimized.

Owner

gettalong commented Sep 22, 2017

Thanks for checking out PHP Markdown Extra and Pandoc!

@ccorn

This comment has been minimized.

Contributor

ccorn commented Sep 22, 2017

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

This comment has been minimized.

kylebarbour commented Sep 22, 2017

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

This comment has been minimized.

Owner

gettalong commented Oct 26, 2017

@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

This comment has been minimized.

kylebarbour commented Nov 14, 2017

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

This comment has been minimized.

Owner

gettalong commented Nov 16, 2017

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

This comment has been minimized.

kylebarbour commented Nov 16, 2017

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

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

@gettalong

This comment has been minimized.

Owner

gettalong commented Nov 26, 2017

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!

@gettalong gettalong closed this Nov 26, 2017

gettalong added a commit that referenced this issue Nov 26, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment