Is there any way to add footnotes?

[jinbe0]

Footnotes like LaTeX is necessary to write up a formal document, but seems no simple way to put footnotes using HTML/CSS or JavaScript. It's possible to set position: absolute, bottom: 0 to the footnote container, but each page margin could not be arbitrary.

CSS Generated Content for Paged Media Module looks good, but it seems not implemented in the current version of Chromium. Not working.

Any other ideas?

[Zulko]

LaTeX-like footnotes may be difficult to do indeed. I believe there is a footnote plugin for Markdown-it. Not sure how good it is. There may be also a way to have footnotes with a pug mixin. Either way, it certainly won't be footnotes in the page footer, rather footnotes below the text at the end of a paragraph or a chapter.

[DanielRuf]

What did you try so far?

So far I positioned it with JS and CSS. See https://github.com/DanielRuf/htmlinvoice/blob/master/invoice.html#L175

[jinbe0]

I've tried simply set position of footnotes container element to 'absolute'. It was certainly stuck on the bottom of its page, but I guess there's no way to set margin-bottom using @page at-rule for a specific page like :nth-child(3) pseudo-classes.

If it possible to set margin for each pages, the following step might be useful.

1. calculate footnotes height and its page number
2. set footnotes position absolute with bottom: 0
3. set its page margin-bottom to be default margin + footnotes height

[Zulko]

Sadly it is not possible to have different margins for each page. Its a chromium limitation.

[DanielRuf]

But some JavaScript magic can always be applied =)

[Zulko]

Yes but javascript can't know what page you are on in a multi-page document, so it cannot place a footnote at the foot of the page where it appears.

[DanielRuf]

Yes but javascript can't know what page you are on in a multi-page document, so it cannot place a footnote at the foot of the page where it appears.

Well, it has to be calculated for sure.
https://github.com/DanielRuf/htmlinvoice/blob/master/invoice.html#L168-L183

[ninest]

Are there any updates on this?

[DanielRuf]

Are there any updates on this?

As you can see there are no updates, at least there is no linked PR or commit.

[rhessing]

I've found this issue when I was looking for a simmular purpose. After some experimenting I found that this piece of CSS puts the content on the bottom of the page but it won't be included on all pages such as the footer css does. Please note that I'm not a professional so most likely the CSS can be improved.

I hope this will get you a bit closer to the official footnotes representation 🙂

CSS:

.pagefooter {
  display: flex;
  height: auto;

  #content {
    position: absolute;
    bottom: 0;
  }
}

Pug usage:

.pagefooter
  #content
    .ui.container
      .ui.icon.message.yellow.block-center
        i.exclamation.triangle.outline.icon
        .content
          .header Internal usage only !
          p
          | Please note that this document is for internal use only and may not be 
          | used for other purposes then the intended purpose of this document or 
          | externally distributed by any means.

div(style="page-break-before:always")