goblindegook / littlefoot Goto Github PK
View Code? Open in Web Editor NEWFootnotes without the footprint.
Home Page: https://littlefoot.js.org
License: MIT License
Footnotes without the footprint.
Home Page: https://littlefoot.js.org
License: MIT License
I'm having a real hard time to integrate littlefoot in a Vue (Nuxt.js) app. I suspect because it's activating before the DOM has fully loaded or something. Can we give littlefoot a certain #el
that it needs to scan?
I think the patch i was proposing in lemonmade/bigfoot#40 could also be usefull for littlefoot. Would you like a PR for that ?
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
Warning
These dependencies are deprecated:
Datasource | Name | Replacement PR? |
---|---|---|
npm | standard-version |
These updates are pending. To force PRs open, click the checkbox below.
These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
.github/workflows/codeql-analysis.yml
actions/checkout v4
github/codeql-action v3
github/codeql-action v3
github/codeql-action v3
.github/workflows/test.yml
actions/checkout v4
actions/setup-node v4
codecov/codecov-action v4
package.json
@pacote/get-style 2.0.2
@pacote/pixels 2.0.2
@pacote/throttle 2.0.2
@biomejs/biome 1.8.1
@commitlint/cli 19.3.0
@commitlint/config-conventional 19.2.2
@rollup/plugin-commonjs 26.0.1
@rollup/plugin-node-resolve 15.2.3
@rollup/plugin-terser ^0.4.4
@rollup/plugin-typescript 11.1.6
@testing-library/cypress 10.0.2
@testing-library/dom 10.1.0
@testing-library/jest-dom ^6.4.6
@vitest/coverage-v8 ^1.6.0
axe-core 4.9.1
concurrently 8.2.2
cssnano 7.0.2
cypress 13.11.0
cypress-axe 1.5.0
cz-conventional-changelog 3.3.0
git-cz ^4.9.0
husky 9.0.11
jsdom ^24.1.0
lint-staged 15.2.6
pixrem 5.0.0
postcss 8.4.38
postcss-cli 11.0.0
postcss-preset-env 9.5.14
prettier ^3.3.2
rollup 4.18.0
standard-version 9.5.0
stylelint 16.6.1
stylelint-config-standard 36.0.0
stylelint-prettier ^5.0.0
tslib 2.6.3
typescript 5.4.5
vitest ^1.6.0
cypress 13.11.0
I just checked the contrast of the grey button with the three white dots, and currently the contrast between this grey and white is of 1.3:1. It would be better if we could have a contrast of 3:1.
This tool can help in finding more contrasted colors: Tanaguru contrast finder
Some CMS add an url before the anchor for the footnote.
That make a markup like this
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/littlefoot/dist/littlefoot.css">
</head>
<body>
<!-- Links -->
<p>
<sup id="fnref:1">
<a href="index.html#fn:1" rel="footnote">1</a>
</sup>
</p>
<!-- Footnote List -->
<div class="footnotes">
<ol>
<li class="footnote" id="fn:1">
<p>footnote. <a href="#fnref:1" title="return to article"> ↩</a></p>
<p></p>
</li>
</ol>
</div>
<script src="https://unpkg.com/littlefoot/dist/littlefoot.min.js" type="application/javascript"></script>
<script type="application/javascript">
littlefoot.default()
</script>
</body>
</html>
Supposing the file is called "index.html". While bigfoot was able to manage this case, that is not true for littlefoot.
Hello,
This commit introduced a change that prefixes footnote button id with lf-
. According to the commit notes, is is to avoid id duplication. It however broke backlink’s functionality as backlink is still looking for the original id without the prefix.
Since littlefoot hides backlinks along with the whole footnote section by default, this is only a problem for users who choose to unhide the footnote section.
I’m not sure if the prefix helps with id duplication much since the duplication probably commonly happens when the original ids themselves have duplication. Tagging the original author of the PR @biou — do you think we could remove the prefix?
I’m happy to open a PR either for removing the prefix or another suggested fix.
numberResetSelector
resets all numbers to 1.
The corresponding unit test is incorrectly defined, it checks for [1, 1, 1, 1]
when it should check for [1, 2, 1, 2]
.
Hi, thanks for this very cool library! I have done some checks on its accessibility and I have found some issues:
I got my website all set up to use 1.0.0-alpha14. I noticed a bug—clicking the button for the active footnote does not close the popover—but when I downloaded master to try to fix the bug it was already fixed. Would you consider releasing a new version with this change in place? The project has been in its current form for a while now, so maybe it’s even time to release a “final” 1.0.0 version?
Hi, when you use the footnotes on a smartphone in landscape mode, the footnotes don't display well. Noticed on google chrome, firefox and safari). But when testing on PC with a window of the same proportions, it works.
By the way, I admit it is not the best way to use footnotes, a good feature would be to display them on the right side, the same way they are displayed at the bottom of the screen when you are in classic portrait mode.
As of the latest few gatsby versions, the usage instructions for gatsby in the README.md
no longer work for gatsby's development server (gatsby develop
), but only for production builds (gatsby build
).
I believe this is caused because when the onRouteUpdate
function is invoked, the HTML is yet to contain the actual page content, but rather the gatsby-focus-wrapper
div is empty (see gatsbyjs/gatsby#14098).
One workaround is to call the littlefoot
method with a timeout, but that is a rather messy and undesirable workaround. For now, I compromised on invoking the method on my main "page" component:
class Page extends React.Component {
componentDidMount() {
if (typeof window !== 'undefined') {
const littlefoot = require('littlefoot').default
littlefoot()
}
}
}
It is important to require
the module only inside of the condition, since this action involves invoking window
and thus will fail the production build if it is made outside the condition (say, at the top of the file with import
). In fact, according to gatsby's documentation, it is sufficient to invoke this part inside the componentDidMount
and there is no need for the window
check.
Perhaps there is an alternative, more elegant gatsby API / "hook" that works too, but I'm not familiar enough with their API.
Setting activateDelay
, activateCallback
, dismissDelay
and hoverDelay
has no effect after instantiation.
Here is the HTML output:
<p>this is a test of a footnote<sup id="fnref:1"><a href="#fn:1" class="footnote-ref">1</a></sup></p>
<div class="footnotes">
<hr />
<ol>
<li id="fn:1">
<p>testing <a href="#fnref:1" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</div>
the Littlefoot JS is loaded and I have the following in my JS:
var littlefoot = require('littlefoot').default;
littlefoot();
When I click on a footnote nothing pops up. How can I debug this?
Thanks
Currently the accessible name of the buttons are managed with aria-label. ARIA attributes should be used in last resort, there are other ways to naming interactive elements.
Here is an article from Adrian Roselli explaining his method to name controls.
The first proposed technique is to use native HTML techniques, in our case, we can give an accessible name to the SVG image inside the button.
One of the advantages of not relying on the aria-label attributes is that translation services will be able to translate the accessible name.
The following articles describe ways to achieve this : accessible svgs on CSS-tricks and accessible svg methods for adding alternative content on Tutsplus
It would be nice to have the finished script available for downloading directly.
Hey, is there any way to make this work with Safari Reader View? Footnotes just disappear there. Same for all those "send to your kindle" apps like ktool for example.
Thanks!
Hi there, I’ve been using Littlefoot on my personal site and noticed that on iOS there’s a weird issue where sometimes the popover dismisses immediately after activation. I haven’t been able to narrow down the repro conditions but I can consistently get it to repro.
To test this, you can visit this blog post on my site and either any of the footnotes on there. One thing I’ve noticed is the first invocation always dismisses immediately, at least in my testing.
I’m running an older version right now (v2.0.3) however updating to the latest (v3.2.1) didn’t really help; it’s somewhat worse with it even: automatic dismissals are even more common, and the animation is often skipped entirely, for both the button and the popover.
I can’t find a vanilla or Gatsby-based demo site for Littlefoot anywhere so it’s hard to tell if this issue is general to the project or something to do with using it in Gatsby as I am.
Here is some example text with a footnote.[^foot1]
[^foot1]: This footnote requires[^foot2] some extra commentary.
[^foot2]: How "required" is this, actually? Let's be honest.
This is definitely a fringe use case, but wanted to raise it in case there was an easy solution. At the moment, it looks like littlefoot doesn't process footnotes inside of footnotes, which means that the popover for foot1
will contain a link to foot2
, but since the entire footnote div has been hidden, that link does nothing.
I imagine having popovers upon popovers would be tricky to get working, but I imagine the UI awkwardness is kind of aesthetically the same cognitive experience of dealing with footnotes to footnotes...
I don't know if there's an elegant solution to it, but wanted to check if it was something you'd ever thought about.
Thanks for all your good work!
Hi. I am a graphic designer. I volunteer to design a logo for open source projects. I can design it for you to use it in the readme file. What dou you say?
Added non-passive event listener to a scroll-blocking 'mousewheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
Some helpful pointers here: https://ebay.gitbooks.io/mindpatterns/content/disclosure/bubblehelp.html
I am not sure how to explain this, if you go to my blog: https://blog.rmrubert.eu/
You can see there are currently two footnotes, both of them are [^1] from different articles. One is next to the word "definitive" and the other next to "succesfully".
I think the problem arises as both of them are [^1], so when they are mixed together in the main page I got this problem.
My question is: there is anyway to solve this situation?
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.
The test coverage of this library is good, but there is no automated accessibility tests.
I recommend aXe as a solution designed to avoid false positives and aXe has bindings for Cypress. It cannot detect all accessibility issues but about 20% of them (still better than no tests)
It could be configured to check only for WCAG A and AA issues.
Hi, switching from bigfoot to littlefoot, i've adapted the name of few settings i was using as this :
littlefoot.default({
anchorPattern: /(nb\d+(footnote|appendix))/gi,
anchorParentSelector: "span",
footnoteParentClass: "spip_note_ref",
footnoteSelector: "div"
});
Here is the original html of my footnotes anchors :
<span class="spip_note_ref"> [<a href='#nb1' class='spip_note' rel='appendix' title='Outre le Porte-plume déjà intégré dans SPIP 2 et qui initiait ce mouvement, on (...)' id='nh1'>1</a>]</span>
And the generated html after littlefoot processing :
<span class="spip_note_ref"> [<span class="littlefoot-footnote__container"><button class="littlefoot-footnote__button littlefoot-footnote__button__ellipsis" id="nh1" data-footnote-button-id="1" data-footnote-number="1" title="See Footnote 1" aria-controls="fncontent:1" aria-expanded="false" aria-label="Footnote 1" rel="footnote"><svg viewBox="0 0 31 6" preserveAspectRatio="xMidYMid"><circle r="3" cx="3" cy="3" fill="white"></circle><circle r="3" cx="15" cy="3" fill="white"></circle><circle r="3" cx="27" cy="3" fill="white"></circle></svg></button></span><a href="#nb1" class="spip_note footnote-print-only" rel="appendix" title="Outre le Porte-plume déjà intégré dans SPIP 2 et qui initiait ce mouvement, on (...)" id="nh1">1</a>]</span>
It matkes that the text content of the <span class="spip_note_ref">
is not hidden, which result to something like [ button ]
in the page.
The difference i observe is that bigfoot was putting its markup before the anchor parent element and hiding it. Instead of this, littlefoot insert its markup in the anchor parent element.
Am i missing something or is it a bug in anchorParentSelector
setting ?
FTR here is a demo page running on bigfoot : https://labo.eliaz.fr/article135.html
The script could provide alternatives css like bigfoot especially the "number style" https://github.com/lemonmade/bigfoot/blob/master/dist/bigfoot-number.css, i managed to reproduce it with quickly with something like that :
.littlefoot-footnote__button {
position: relative;
height: 0.95em;
width: 1.5em;
border-radius: 0.475em;
}
.littlefoot-footnote__button:after {
content: attr(data-footnote-number);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
font-size: 0.57em;
font-weight: bold;
color: rgba(110, 110, 110, 0.5);
-webkit-transition: color 0.25s ease;
transition: color 0.25s ease;
}
.littlefoot-footnote__button circle {
display: none;
}
Any thoughts about this ?
PS : the readme is actually mentioning this style For example, you may be using the numbered style of footnote
.
Hello!
I noticed that my littlefoot popups have leading and trailing <p>
that are not present in the original HTML.
In other words, for a footnote consisting —in the source HTML— of a single paragraph, the popup content has three.
With some work, I was able to trace it to the way my Markdown engine generates the footnotes: with a newline between the <li>
element, and its first <p>
.
I prepared an example to show what I mean: https://jsfiddle.net/gzsnhd7x/show. The second popup contains unexpected <p>
elements.
Many thanks in advance!
hey!
I'm trying to install littlefoot in a Jekyll site with the minimal mistakes template but I'm not able to, and I really don't know what I'm missing.
I'm trying to install in a manual mode... moving littlefoot.min.js
to the js
folder and also the scss as minimal mistakes explains in the above link. I'm sure I'm missing something.
I wanted to migrate from bigfootjs to this, mainly because seem that bigfootjs doesn't show up correctly when it's inside of a section of a web with overflow: hidden
in the css.
Has littlefoot overcome this problem in some way?
Hi,
consider this example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/littlefoot/dist/littlefoot.css">
</head>
<body>
<!-- Links -->
<p>
<sup id="fnref:1">
<a href="index.html#fn:1" rel="footnote">1</a>
</sup>
</p>
<!-- Footnote List -->
<div class="footnotes">
<ol>
<li class="footnote" id="fn:1">
<p><span>[<a href="#fnref:1" class="spip_note" title="Notes 1" rev="appendix">1</a>] </span>Anciennement Campagne astronomie.
</p>
</li>
</ol>
</div>
<script src="https://unpkg.com/littlefoot/dist/littlefoot.min.js" type="application/javascript"></script>
<script type="application/javascript">
littlefoot.default({
anchorParentSelector:'span'
})
</script>
</body>
</html>
As the <%= content %>
contain the <span>
, we get a which, in our case, is not required in the footnote bullet.
Hi,
The bottom footnotes (on screens with narrow width) seem to be designed so that they occupy the whole width. But I fail to obtain this result.
I tried the example you give here :
https://codepen.io/goblindegook/pen/oPNzGE
it works fine on the codepen preview :
But when running the code in a browser from an independent html file (simple copy/paste of the code), the bottom footnotes leave some empty space on the right. Tested on PC desktop, on chrome and firefox, same behaviour.
Maybe this comes from the way the body width is taken in argument in the .js ? The .css seems ok. I failed to solve the problem...
Hello I've been trying to find a responsive footnote solution and found BigfootJS. But after discovering that BigfootJS isn't compatible with jQuery 3, I've found littlefoot.
I followed the instructions but littlefoot isn't working. I've installed the plugin via NPM, included it in my project files, added the styles via SCSS and compiled it. Here's my setup
HTML:
<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>
<div class="footnotes">
<ol class="list list--ordered">
<li class="list__item footnote" id="fn:1">
<p>footnote for disclosure #1.
<a href="#fnref:1" title="return to article">
<i class="fa fa-level-up"></i>
</a>
<p>
</li>
</ol>
</div>
JS:
var littlefoot = require('littlefoot').default;
var littlefootOptions = littlefoot({
allowDuplicates: true,
allowMultiple: true,
activateOnHover: true,
dismissOnUnhover: true,
hoverDelay: 100,
preventPageScroll: false,
});
littlefoot(littlefootOptions);
Can you help?
96bce81 mention version 3.1.5, but there is no release/tag since 3.1.3 cf https://github.com/goblindegook/littlefoot/releases
I would like to see an additional option in the setup config to not hide the footnote list at the end of the post. The idea is, if someone wants to read all the footnotes at the end, they can.
I have in the meantime found a workaround to force things visible again — which isn't all that easy since they are forced invisible by the display: none !important
.
My workaround for people that are curious, it keeps the numbers in the text invisible, but adds the list of footnotes including their index back in at the bottom:
.footnotes.footnote-print-only,
.footnotes-list.footnote-print-only {
display: block !important;
}
.footnote-item.footnote-print-only {
display: list-item !important;
}
Hi, I'm using littlefoot last version with the following configuration. The animation works only the first time opening the popover. Also trying to activate the hover feature I have the same behavior.
littlefoot({
// activateOnHover: true,
// dismissOnUnhover: true,
buttonTemplate: `
<button
aria-expanded="false"
aria-label="Footnote <% number %>"
class="littlefoot-footnote__button"
id="<% reference %>"
title="See Footnote <% number %>"
/>
<% number %>
</button>
`,
})
littlefoot: "littlefoot": "^3.4.0"
Jekyll :"jekyll", "~> 4.1.1"
Chrome: Version 85.0.4183.102 (Official Build) (64-bit)
macOS Catalina: 10.15.6
Hi there! I love bigfoot, so I'm really glad you decided to take this on.
I'm seeing some odd behavior when using this w/ Gatsby. During the development build, everything works as expected:
During the production build, something goes wrong. It looks like the correct CSS isn't being applied and/or the regular markdown isn't being removed properly. You'll note that on the production page, the original footnotes are at the bottom of the page.
You can see that live here: https://xavd.id/blog/post/an-ode-to-kobo/
I've got basically the exact example from the docs, plus the default numeric button markup:
I tried it without the button markup it had the same result (except that the button was blank, not with a number).
I'm using gatsby-plugin-mdx
(which uses remark under the hood) for markdown parsing and a recent (though not latest) version of gatsby (to get around a separate issue).
Any ideas you have are much appreciated!
As long as one footnote is hovered after the hover delay period elapses, no footnotes are dismissed at all.
The correct behaviour is to dismiss any footnotes not currently hovered at the end of the hoverDelay
timeout.
On my blog, I am using littlefoot.js and I am applying some effects in JS on the popover.
With "activateCallback", I can initialize the effect when the popover is shown. But currently, I cannot remove the effect when the popover is hidden.
Would not it be interesting to have another callback, like "deactivateCallback" when the popover is hidden?
I know this would differ from the bigfoot.js API, but It would not break the compatibility with scripts made for bigfoot.js.
What do you think?
Hey there! Thanks for this repo.
I’m fairly new to the JS/front-end world so forgive me if this is a stupid question, but I’m curious about how you’d set up Littlefoot with Gatsby. I've previously used Bigfoot with Jekyll and had no issues there, but I’m not sure how to set up something like Littlefoot with Gatsby since most things seem to be handled by plugins and don’t really require <script>
s.
Thank you for your time
Here is how I am initializing Littlefoot
<script src="/js/littlefoot.js" type="application/javascript" ></script>
<script type="application/javascript"> littlefoot.default({
activateOnHover: true,
dismissOnUnhover: true,
hoverDelay: 200,
}) </script>
I like having the footnotes automatically dismissed so as to be able to move your mouse around a page without having footnotes stay popped-up if you hover over one incidentally when scrolling (e.g.). I think this sort of UX is superior.
One side effect of using the library this way, however, is that when viewing a footnote, the user needs to keep their mouse cursor over the footnote button or the footnote tooltip so that it won't be dismissed. Having their mouse cursor over the tooltip blocks the text a bit, but so too does having the cursor over the footnote button, because of the title tooltip triggering as well on hover. Here is what I mean:
Is there a good way to prevent this behavior out of the box (preferably by disabling the title tooltip when hovering over the footnote button, leaving just the footnote tooltip)? I'm sure there is a way to do it in a somewhat kludgy modify-the-DOM-at-render-time sort of way, but I'm just curious if I have failed to find a configuration setting that might help in this regard.
Some markdown renderers may not add such a title attribute, but the two I have tried (one for the static site generator I use, and another for a JavaScript library that turns Markdown into presentation slides) have added a title attribute, leading to this issue.
Any thoughts?
Hello there,
I installed littlefoot.js on a WordPress website. I used the solution offered here: #8 (more specifically, I replicated the demo here: #8 (comment)).
It works fine on desktop and tablet, but when the footnotes have to be displayed in full width (on mobile mostly), the display breaks. See this screenshot:
I tried to use another WordPress theme to see if there is any incompatibility between my current theme and littlefoot, but nothing changed. I also deactivated another plugin I used in the past to display footnotes.
Any idea what I could do to fix this?
Thank you very much, and great work on this script!
With Littlefoot 2.0.2 under Safari 12 on macOS, if you open a footnote that’s long enough to scroll, you can’t just place your cursor over the footnote text and scroll with the scroll wheel (or trackpad gesture)—this just scrolls the entire page. Instead, you have to click inside the footnote first and then the mouse/trackpad will work to scroll the footnote.
Firefox 67 and Chrome 75 on macOS do not have the same problem.
I don’t have a PR ready for this one, sorry 😉
Expected behavior: the footnote scrolls down, revealing more of the text.
Actual behavior: the entire page scrolls.
(This is the same example I used for #21.)
<!DOCTYPE html>
<head>
<title>Footnote test</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/littlefoot.css"/>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, eleifend vivamus aenean ad nec velit, posuere senectus fermentum gravida faucibus natoque. Sagittis ac commodo nisl neque ornare eleifend et pretium, nec metus sapien pulvinar etiam cubilia.<a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a> Morbi bibendum litora phasellus imperdiet at nam cum iaculis proin, eu natoque lacus rutrum lacinia donec arcu suspendisse nostra,<a href="#fn2" class="footnote-ref" id="fnref2"><sup>2</sup></a> felis fames ad semper eget senectus primis dignissim.</p>
<section class="footnotes">
<hr />
<ol>
<li id="fn1"><p>Volutpat vitae proin mattis lacinia malesuada ullamcorper metus magnis per feugiat, conubia dignissim integer nibh curabitur mauris semper mi sed mollis leo, parturient praesent sapien cras lacus pretium consequat commodo facilisis. Commodo velit feugiat in proin ligula ullamcorper imperdiet euismod, odio ridiculus placerat ante lacus nunc vel donec, non facilisi condimentum turpis justo massa tristique. Aptent curabitur pharetra condimentum porttitor ullamcorper mi nullam sollicitudin primis volutpat, per dapibus leo est sed non donec laoreet penatibus, tortor dui eu porta fames dictum lacinia et ligula.<a href="#fnref1" class="footnote-back">↩︎</a></p></li>
<li id="fn2"><p>I like turtles<a href="#fnref2" class="footnote-back">↩︎</a></p></li>
</ol>
</section>
<script src="https://unpkg.com/[email protected]/dist/littlefoot.min.js" type="application/javascript"></script>
<script type="application/javascript">
littlefoot.default()
</script>
</body>
</html>
Can you add a feature to update the URL when we click on a footnote reference, just as footnotes links does (#fn:1
) ? So we can deeplink to the footnote/popover.
Hi!
I'm currently using the Academic theme for Hugo, which uses Goldmark by default.
I'm trying to make littlefoot
work but no luck yet.
I haven't figured out the problem yet but any help would be greatly appreciated.
Thanks!
Programmatic activation should dismiss other popovers when allowMultiple: false
.
Hi,
I'm using the Academic theme which allows me to write math expressions using MathJax. Without littlefoot
I can write math (LaTeX) expressions also in footnotes and they are correctly parsed and rendered. With littlefoot
, however, MathJax expressions are not being interpreted in footnotes.
Is there any solution for this?
Thanks!
Any chance you could hook this up to CDNJS?
Noticed that detailed instructions on how to use littlefoot from a CDN module are missing from the README.
I presently use bigfoot.js extensively in my wordpress site (www.agneic.com)
I am designing new website and thinking of using little foot.js.
Do you know of anyone/anywhere I might reference how to install littlefoot.js in a wordpress environment?
being really new to coding, I'm presently unsure of what goes where when it comes to installing littlefoot.js into a word press environment...
Due to Firefox bug 748518—which is marked INVALID and apparently not going to be fixed—Firefox calculates the bottom padding of the footnote content differently from other browsers. The upshot is that, in any Littlefoot footnotes that are long enough to scroll, there is not enough padding below the content, and the last line of the content is partially obscured by the “fade out” gradient at the bottom of the footnote.
Another ticket for the same issue (demonstrated in Bigfoot) is webcompat/web-bugs#22740.
Here’s a screenshot of how the HTML below renders in Firefox 67.0.4 on macOS. The footnote is scrolled down as far as possible; as you can see, the last line is cut off.
<!DOCTYPE html>
<head>
<title>Footnote test</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/littlefoot.css"/>
</head>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit, eleifend vivamus aenean ad nec velit, posuere senectus fermentum gravida faucibus natoque. Sagittis ac commodo nisl neque ornare eleifend et pretium, nec metus sapien pulvinar etiam cubilia.<a href="#fn1" class="footnote-ref" id="fnref1"><sup>1</sup></a> Morbi bibendum litora phasellus imperdiet at nam cum iaculis proin, eu natoque lacus rutrum lacinia donec arcu suspendisse nostra,<a href="#fn2" class="footnote-ref" id="fnref2"><sup>2</sup></a> felis fames ad semper eget senectus primis dignissim.</p>
<section class="footnotes">
<hr />
<ol>
<li id="fn1"><p>Volutpat vitae proin mattis lacinia malesuada ullamcorper metus magnis per feugiat, conubia dignissim integer nibh curabitur mauris semper mi sed mollis leo, parturient praesent sapien cras lacus pretium consequat commodo facilisis. Commodo velit feugiat in proin ligula ullamcorper imperdiet euismod, odio ridiculus placerat ante lacus nunc vel donec, non facilisi condimentum turpis justo massa tristique. Aptent curabitur pharetra condimentum porttitor ullamcorper mi nullam sollicitudin primis volutpat, per dapibus leo est sed non donec laoreet penatibus, tortor dui eu porta fames dictum lacinia et ligula.<a href="#fnref1" class="footnote-back">↩︎</a></p></li>
<li id="fn2"><p>I like turtles<a href="#fnref2" class="footnote-back">↩︎</a></p></li>
</ol>
</section>
<script src="https://unpkg.com/[email protected]/dist/littlefoot.min.js" type="application/javascript"></script>
<script type="application/javascript">
littlefoot.default()
</script>
</body>
</html>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.