Is there any way to add footnotes? about relaxed HOT 10 OPEN

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")

from relaxed.

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.

from relaxed.

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

from relaxed.

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

from relaxed.

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

from relaxed.

But some JavaScript magic can always be applied =)

from relaxed.

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.

from relaxed.

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

from relaxed.

Are there any updates on this?

from relaxed.

Are there any updates on this?

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

from relaxed.