Improved footnote support #3601
Replies: 2 comments 4 replies
-
|
Thank you for writing this up! And for all of your work on Starlight! I was confused about Starlight visually hiding the "Footnotes" heading just now in a site that I maintain. As of this writing, this discussion thread is one of the first that comes up on Google when searching "astro starlight footnotes heading." With that in mind, while this discussion progresses, I thought it might be of use to other readers to note that, as a stopgap, I successfully got the "Footnotes" header to display by editing the site's /* Show footnotes heading */
h2#footnote-label {
width: unset;
height: unset;
position: unset;
}And, similarly as a stopgap, added some styling to footnote links with this snippet: /* Style footnote links */
a[data-footnote-ref] {
text-decoration: none;
font-weight: bold;
border: 2px solid var(--sl-color-accent);
padding: 0;
margin: 0;
height: 1.4em;
min-width: 1.4em;
border-radius: 50%;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.


Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
What version of
starlightare you using?0.37.0
What is your idea?
Starlight currently supports footnotes via Astro’s default Markdown processing but it is mostly an afterthought and not something we’ve spent time looking at. This means there are a fair number of rough edges:
headings, so shows up in the table of contents. I’m unsure if that’s desirable or not, but it is a bit confusing given this heading is visually hidden by default.Examples of the current behaviour
Small, hard to see/click superscript footnote in text:

Bottom-of-page references, which has no visible heading, but the heading labelled “Footnotes” still shows in Starlight’s table of contents in the right sidebar. Additionally, the “back” link is an emoji that is small and fails touch target sizing requirements.

Why is this feature necessary?
Some users have already expressed interest in footnotes (#2622, #3575) and although we support it “by default”, it would be good to polish up any rough edges, especially to fix accessibility issues for anyone deciding to use this.
On the flipside, footnotes still remain a relatively rare requirement for docs (and maybe not a great choice in terms of UX), so this is maybe not high priority.
Do you have examples of this feature in other projects?
Participation
Beta Was this translation helpful? Give feedback.
All reactions