Footnotes Title


#1

I’m loving StackEdit so far, it’s amazing how easy and fast is to create something really nice in it.

One question, would be possible to add a Footnote Title before their texts itself ? I was thinking on using them as a references from citations for example, and would be nice to have “References” or some other stuff written, just before the footnotes texts…


#2

Quickhack

Automatic pseudotitle with CSS for footnotes section.

Features
  • work with exported (styled)HTML and PDF (_which is essentially a simple printout from HTML export)
  • won’t break markdown non-linguistic (English) based syntax
  • wont conflict with need to avoid that title
    • to preserve space
    • ruining specified formatting requirements
    • for example, pandoc exported PDF formats footnotes differently: they are displayed at the end of the mentioned page, rather than at the end of the document (like with HTML export)

Just edit your Handlebars Templates to include some extra CSS code, either as file or section (to enhance default StackEdit styling file for exports).

Example CSS

which adds text just before footnotes section, and styles it like second level heading:

  section.footnotes::before { 
    content: "References";
    margin: 1.8em 0;
    line-height: 1.33;
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    border-bottom: 1px solid hsla(0,0%,50%,.33);
    position: relative;
    top: .33em;
}
Sample Handlebars Template

It’s just edited version of Styled HTML Template

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{files.0.name}}</title>
  <link rel="stylesheet" href="https://stackedit.io/style.css" />
  <style>
    section.footnotes::before { 
      content: "References";
      margin: 1.8em 0;
      line-height: 1.33;
      display: block;
      font-size: 1.5em;
      margin-block-start: 0.83em;
      margin-block-end: 0.83em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
      border-bottom: 1px solid hsla(0,0%,50%,.33);
      position: relative;
      top: .33em;
	}
  </style>
</head>

{{#if pdf}}
<body class="stackedit stackedit--pdf">
{{else}}
<body class="stackedit">
{{/if}}
  <div class="stackedit__html">{{{files.0.content.html}}}</div>
</body>

</html>

I have used similar method to add select-all feature for code snippets, helpful css guide for this: https://css-tricks.com/click-once-select-all-click-again-select-normally/


#3

Just type “## References” as last line

This method, unlike previously provided solution, inherits ability to be linkable, as well as leaves possibility to choose the content of the title by users liking (other than References or in another language than English).

Unfortunately this introduces another problem:

Double horizontal lines.

Previously provided solution wouldn’t exactly solve this either, it simply displays title below the final ruler, instead above it (I think it bit more aesthetic).

I'd solve this with conditional rule, so that the program simply remove -- or at least hide -- the horizontal ruler above the footnotes section, in case if last line of the document is header.

Perhaps, also limiting to level 1 and 2 header only, even more so, as since third and lower levels do not have underlines.

Personally, I’ve met this as issue as well, often ending to manually edit exported document as needed (if possible). But also mine need for this title to lack, has been way more frequent.


#4

That’s really nice, I’ll try both suggestions to check it out what will suits me more. By the way @JanLS how do you set up the conditional rule?


#5

I’ve used the first solution with the CSS, which works just fine for me, exported as html but manually deleted the last <hr> separator, which looks great.

But as you said, more frequently than never we’ve been needed to give credits, would be nice to know how to do the conditional stuff on the template itself, to avoid this job.


#6

added

<style>
hr.footnotes-sep {
	display:none;
	}
</style> 

and it has met my needs!