How do I change reverse footnotes of kramdown using CSS?

Question

This is how I make a footnote using kramdown. (I am also working within the context of Jekyll)

I make a reference to a footnote [^1].
[^1]: This is the footnote.

This gives me the following HTML code from the second line:

<div class="footnotes">
  <ol>
    <li id="fn:1">
      <p>This is the footnote. <a href="#fnref:1" class="reversefootnote">&#8617;</a></p>
    </li>
  </ol>
</div>

While I am fine with all this, I do wish to switch out the ↩ character for one of my choosing (a Font Awesome character, actually). What is the best way of achieving this? Can I use CSS?

Answer 1

As far as I know, this isn't presently an option in kramdown — at least, it isn't listed in the configuration options. (Might want to submit a feature request; the devs are very responsive.) However, there're a few workarounds that you can try, depending on your situation. Of these, probably the simplest is to pipe your output through sed and change the character to whatever you want:

    kramdown yourfile.txt | sed -e 's/↩/whatever/g' > yourfile.html

There are hacks suppressing the reversefootnote class in CSS or changing the character in Javascript but it's probably better to change the actual content.

Answer 2

I recently asked myself the same thing; I wanted to replace the ↩ (LEFTWARDS ARROW WITH HOOK) character with the ↵ (DOWNWARDS ARROW WITH CORNER LEFTWARDS) character.

After some research, I found text replacement with pseudo-elements and css visibility. I ended up using the reversefootnote class on a private gh-page as follows:

.reversefootnote {
  visibility: hidden;
  position: relative;
}

.reversefootnote:after {
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  content: "\21B5";
}

Note: \21B5 is the css value for ↵.

For a FontAwesome icon, I would need to declare the @font-face or upgrade the old FA I'm using before testing the icon code desired as the content: property value.

I hope this helps anyone coming across this old thread.

Answer 3

I checked the code of kramdown on GitHub.

I found, near line 485 of html.rb FOOTNOTE_BACKLINK_FMT = "%s<a href=\"#fnref:%s\" class=\"reversefootnote\" role=\"doc-backlink\">%s</a>" and the last %s points to @options[:footnote_backlink].

So just add footnote_backlink to your _config.yml.

...

kramdown:
  auto_ids: true
  footnote_backlink: "My Go Back Text"
  syntax_highlighter: rouge
  syntax_highlighter_opts:
    block:
      line_numbers: true
...

In this case the symbol would be replaced with My Go Back Text.

HINT: When footnote_backlink is set to "" (empty string), then the "Go back link will be omit"

When you want an icon from an icon-font, change the font-family via css.

I favorite symbol is ↰ U+21b0.

The change is also documented, in the release notes v1.8.0