Footnote styling

support
1

Is there a way to modify the way footnotes are rendered without resorting to using JS to manipulate the DOM?

Here’s the HTML that is output by default:

<div class="footnotes">
  <hr>
  <ol>
    <li id="fn:1">
      My footnote content.
      <a class="footnote-return" href="#fnref:1"><sup>[return]</sup></a>
    </li>
  </ol>
</div>

All I really want to change is <sup>[return]</sup> to use an arrow :leftwards_arrow_with_hook: instead of the word “[return]”.

2 Likes
2

This is generated by the markdown -> html renderer. Hugo doesn’t touch it. If there’s a compelling change that needs to be made we can either 1. file a ticket on blackfriday or 2. have hugo rewrite the html before it writes it to disk.

If it was me, I’d just use CSS here to modify the content property and hide the current sup.

3

Cool. I wasn’t sure how much was blackfriday vs. hugo. The CSS workaround should do fine for this, thanks!

4

This may be easier than you think, depending on when blackfriday’s HtmlRendererWithParameters gets called. Regardless, there’s an option for this (renderParameters.FootnoteReturnLinkContents) that can be changed. It defaults to [return] if the HTML_FOOTNOTE_RETURN_LINKS option is set but renderParameters.FootnoteReturnLinkContents is not provided). I’m sure there’s a few other options like that which could be set (at least) in config.{toml,yaml,json} if not per-article frontmatter.

See also html.go:111.

5

I figured out how to make this happen and have a PR for it.

1 Like
6

A related tip:

Footnote refs in text tend to make jittery (uneven) line-heights. Wikipedia, with billions of them, only fixed this some months ago.

I picked up this simple tip somwhere and it works great:

sup, sub {
vertical-align: baseline;
position: relative;
top: -0.4em;
}
sub {
top: 0.4em;
}
5 Likes
7 
config.toml
-----------

FootnoteReturnLinkContents = "↩"

Adding this line in the config file worked great.

I post this reply because in order to find this setting, you would have to enter to the link of the github PR posted by @halostatue, then you would then get redirected to another PR. I guess I would make it more accesible by putting it in a comment here.

It sounds weird that the word “return” is the default in blackfriday, because it assumes that the content creator is english-speaker (and runs a blog written in English).
Although, on the other hand, there’s not much alternative. I have yet to test if the arrow posted here works in the oldest operative systems that don’t support emoji (like Windows XP). Also in other operative systems the symbol gets replaced by an emoji and this might bring up some inconsistency and unpredictability in the design.

Wikipedia handles it a different way: it places a ↑ sign (which I’m pretty sure must work on Windows XP). Additionally, the symbol is placed at the beginning of the footnote, where it gains in visibility, not at the end where it may be hidden “camouflaged” by other links. I consider this to be the proper symbol and the proper placement for that symbol.

This is what my config and CSS styles look like:

FootnoteReturnLinkContents = "↑"

// footnote link
a[href^="#fn:"],
// Back to footnote link
a[href^="#fnref:"] {
  text-decoration: none;
  color: $orange;
  font-family: monospace;
}
a[href^="#fn:"]:before{ content: '[' }
a[href^="#fn:"]:after{ content: ']' }

And this is what it looks like:

12 Likes
8

This thread was really useful to me to customize the footnote links and return symbol. Thank you!

Now, I am struggling to get rid of the <hr> that gets automatically added above the footnotes. I looked in all the css and scss files of the theme I am using and I cannot find where the formatting of the footnotes is.

Any advice on where this formatting might be encoded or alternatively, a way to override the default formatting would be really helpful. I made the footnotes a lot smaller and I would like to either get rid of the <hr>, or at least make it shorter and pale gray.

Thank you!

9

There is probably no styling in the theme for the footnotes. So you have to add it (in scss):

.footnotes {
   > hr {
     display: none;
   }
}
10

how about that though!

.footnote-ref {
font-size: 0.90rem;
color: yellow;
&:hover {
color: red;
}
&:visited {
color: orange;
}
}

What’s best ? text-decoration doesn’t work apparently, nor &:visited.