For the following markdown:
A line with a footnote.[^target]
[^target]: The footnote text
, depending on the line width, the period may be rendered at the end of a line and the footnote number on the next line.
One solution to keep the footnote number on the same line as the period is to manually insert a span with no-wrapping whitespace:
A line with a <span style="with-space: nowrap">footnote.[^terminal]</span>
[^target]: The footnote text
Is it possible to automatically enforce the footnote number to be rendered on the same line as the preceding symbol (the period in this example), for example by configuring BlackFriday, using css, using javascript or by any other method?
1 Like
May be type as below?
A line with a footnote . [^target]
No, unfortunately this does not work.
Hugo creates the HTML for footnotes in a particular format, so you could use a replaceRE to find all footnotes and automatically wrap them in that nowrap span. It requires modifying at least one template file, but it’s the best “set and forget” method I can think of.
2 Likes
Great @Shadow53!
I’m a Hugo template noob but your suggestion put me on the track where I learnt about the power of .Content and pipes. I’ve ended up with the following solution in layouts/_default/single.html:
{{ $reg := "([^ ]*<sup class=\"footnote-ref\".*</sup>)" }}
{{ $replacement := "<span class=\"footnote\">$1</span>" }}
{{ .Content | replaceRE $reg $replacement | safeHTML }}
, and the following css:
span.footnote {
white-space: nowrap;
}
This will do for now but the solution depends on the specific markup generated by the current version of Blackfriday. Ideally I would prefer if this could be done by Blackfriday directly 
1 Like
Ideally this should be taken care of by Blackfriday and I’ve added the issue Enforce the footnote number to render on the same line as preceding word to the Blackfriday GitHub repo.
1 Like
@Karl_Marklund I was able to fix this by simply using 1 — Markdown, HTML
1 Actually I don’t add it manually, I write posts in Org and ox-hugo does the auto insertion 
.
@kaushalmodi The following Markdown:
A sentence with a footnote.[^target]
[^target]: Target text
, generates the following HTML:
<p>A sentence with a footnote.<sup class="footnote-ref" id="fnref:target"><a rel="footnote" href="#fn:target">1</a></sup></p>
Using in the following Markdown:
A sentence with a footnote. [^target]
[^target]: Target text
, generates the following HTML:
<p>A sentence with a footnote. <sup class="footnote-ref" id="fnref:target"><a rel="footnote" href="#fn:target">1</a></sup></p>
Both versions can be made to render like this.
Hmm… cannot replicate that at least on Firefox (see below gif)
I simply pasted your example in my test site:
A sentence with a footnote. [^target]
[^target]: Target text
and the HTML from my test site:
<p>A sentence with a footnote. <sup class="footnote-ref" id="fnref:target"><a rel="footnote" href="#fn:target">2</a></sup></p>
… looks like it’s something browser-dependent?
@Karl_Marklund Or some CSS in your theme is forcing that mid-word wrapping to happen? If you look at the source of my test site, the only CSS I use is this:
body {
margin: 40px auto;
max-width: 650px;
line-height: 1.6;
font-size: 18px;
color: #444;
padding: 0 10px;
}
h1, h2, h3 {
line-height: 1.2;
}
and Chroma-based syntax highlighting.
Can you replicate the footnote issue on that test site?
To test the fix for this, increase/decrease the width of the browser window showing this page so that the test lines below start wrapping around, and you will see that the footnote references will never be on their own on a new line.
If yes, then it’s probably a browser issue; and if not, then it’s a theme issue.
@kaushalmodi I’ve only tested on Google Chrome. Can I clone your test site from a GitHub repository or similar?
OK, I tested on that too, and the solution works there too.
You shouldn’t need to do that… the test site I linked above is Hugo generated site. You simply need to open that link in your browser and change the browser window width as I do in that GIF. I see that doing that doesn’t ever cause a new line to start with the footnote ref link.
In any case, if you’d like to clone the test site, do:
git clone https://github.com/kaushalmodi/ox-hugo
cd ox-hugo/test/site
hugo server
I have linked the test Markdown file in question in one of my posts above.
Confirmed, a theme issue.
I’m using derivate of Hugo-theme-learn and have yet to pin down exactly what in the theme it is that causes this behaviour.
As always, in hindsight this should have been obvious. Sorry for all trouble I may have caused.
It turned out that Hugo-theme-learn uses the following jQuery to add the class highlight to almost all a elements.
$('#body-inner a:not(:has(img)):not(.btn)').addClass('highlight');
Further, the theme uses the following CSS to set display: inline-block on the a element inside the footnote sup element.
#body a.highlight {
line-height: 1.1;
display: inline-block;
}
I’m not fluent in CSS and didn’t know about inline-block before, but now I’ll never forget about it.
No trouble at all. This was an interesting discussion.
It turned out that Hugo-theme-learn uses the following jQuery to add the class highlight to almost all a elements.
That must have been a painful debug. Glad you figured out the whole thing.
