Footnotes does not render properly on HTML

[hdocmsu]

Bug description

I used conda create project to create a book project and test footnotes. I did not change the project template except by adding sample text with footnotes, as shown below. The rendered HTML does not show the "Footnotes" title and the font size in the footnote section is the same as that in the main body.

Steps to reproduce

Here is the changes I made to the book template:

# Summary

In summary, this book has no content whatsoever.


Here is a footnote reference,[^1] and another.[^longnote]

[^1]: Here is the footnote.

[^longnote]: Here's one with multiple blocks.

    Subsequent paragraphs are indented to show that they
belong to the previous footnote.

        { some.code }

    The whole paragraph can be indented, or just the first
    line.  In this way, multi-paragraph footnotes work like
    multi-paragraph list items.

This paragraph won't be part of the note, because it
isn't indented.

Expected behavior

below is the expected behavior from the quarto doc website.

Actual behavior

Actual behavior.

Your environment

• IDE: VS code 1.96.2
• Ubuntu 24.04.1 LTS

Quarto check output

quarto check

OUTPUT:

Quarto 1.6.39
[✓] Checking environment information...
Quarto cache location: /home/owner/.cache/quarto
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.4.0: OK
Dart Sass version 1.70.0: OK
Deno version 1.46.3: OK
Typst version 0.11.0: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.6.39
Path: /opt/quarto/bin

[✓] Checking tools....................OK
Chromium: 869685
TinyTeX: (not installed)

[✓] Checking LaTeX....................OK
Using: Installation From Path
Path: /usr/local/texlive/2024/bin/x86_64-linux
Version: 2024

[✓] Checking basic markdown render....OK

[✓] Checking Python 3 installation....OK
Version: 3.11.8 (Conda)
Path: /home/owner/anaconda3/bin/python
Jupyter: 5.5.0
Kernels: mojo-max-jupyter-kernel, ir, julia-1.10, python3

[✓] Checking Jupyter engine render....OK

[✓] Checking R installation...........OK
Version: 4.4.2
Path: /usr/lib/R
LibPaths:
- /home/owner/R/x86_64-pc-linux-gnu-library/4.4
- /usr/local/lib/R/site-library
- /usr/lib/R/site-library
- /usr/lib/R/library
knitr: 1.46
rmarkdown: 2.28

[✓] Checking Knitr engine render......OK

[mcanouil]

That's not a bug, you are comparing two different thing a book and a website/simple html file.

The style for book has no header and an horizontal rule because that's the usual style for books.
Everything works exactly as designed and expected.

Input

Output

--- language: section-title-footnotes: Example Footnotes reference-location: section format: html --- Here is a footnote reference,[^1] and another.[^longnote] [^1]: Here is the footnote. [^longnote]: Here's one with multiple blocks. Subsequent paragraphs are indented to show that they belong to the previous footnote. { some.code } The whole paragraph can be indented, or just the first line. In this way, multi-paragraph footnotes work like multi-paragraph list items. This paragraph won't be part of the note, because it isn't indented.

Converting this to a discussion as there is no bug.

[hdocmsu]

Thanks for the clarification, @mcanouil!

I know it is by design for the book, especially for the PDF output. However, for the book's HTML output, the footnotes rendered in the website project look better to me, especially, since there is the headline "Footnotes" or "Custome Footnotes" and the font is slightly smaller than the font from the main body. Anyway, you have answered my questions, since I was trying to fix the "bug" but, apparently, there is no bug :). Thanks again!

[mcanouil]

You can use (S)CSS to tweak the footnotes styling if you want.
Adding a header would be less easy but still possible at least via JavaScript.

[hdocmsu]

Thanks for the suggestion, did not think of using CSS. I will give it a try. If you have any pointer on top of your fingertips, please share. Otherwise, I will do some research and try it out.

[hdocmsu]

With the help of Claude, I was able to style the footnote as desired. Below are the changes to the styles.css

/* Footnote styling */
.footnotes {
  font-size: 0.85em;  /* Make footnotes smaller */
  margin-top: 2em;
  border-top: 2px solid #ddd;
  padding-top: 1em;
}

.footnote-ref {
  font-size: 0.85em; 
  vertical-align: super;
}

.footnote-back {
  font-size: 0.85em;
}

/* Add "Footnotes" title */
.footnotes::before {
  content: "Footnotes";
  display: block;
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 1em;
}

[hdocmsu]

Here is the output:

[hdocmsu]

Here is the output: