Example: Generating footnotes with the URLs of links
It seems common, to put the URLs of links in parentheses after links (using generated CSS content), so readers who print a document can still see links.
I don't like this approach very much, because it kills the reading flow, and doesn't work well with long URLs, or when there are several URLs. Ideally, URLs would be displayed in footnotes on the same page.
Fortunately, paged.js
supports footnotes now (at least the dev version).
I have created a small function that creates footnotes for all external links (with a CSS class to disable this for some links).
I'll post my code below, in case anybody is interested in it. Maybe it would be useful, to add something like this to the upcoming footnotes docs?
The first step is to add the following CSS:
span.footnote {
float: footnote;
}
It seems, the .footnote
class is a requirement (I tried to use .fn
instead, but that didn't work).
Next, add the following JavaScript after the polyfill of paged.js
was loaded:
class handlers extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
}
beforeParsed(content) {
generate_link_footnote(content)
}
}
Paged.registerHandlers(handlers);
// Generate footnotes for certain links, so people who
// print the document still can access linked ressources
function generate_link_footnote(content) {
// Select all links that are not internal links, and
// don't have the `no-link-footnote` class
const links = content.querySelectorAll(
`a[href]:not([href^="#"], .no-link-footnote)`
)
// Dummy element to create elements via `innerHTML` using strings
const div = document.createElement("div")
for (link of links.values()) {
// Creating the footnote
div.innerHTML = `<span class="footnote"><a href="${link.href}">${link.href}</a></span>`
// Adding the footnote inside the 'a' element, to
// make sure, the footnote doesn't end up on a different
// page:
link.insertAdjacentElement("beforeend", div.firstChild)
}
}
If you want to exclude a link, you can add the class no-link-footnote
to it.
For information about how to use footnotes, the following directory contains examples that you can look at:
https://gitlab.pagedmedia.org/tools/pagedjs/tree/master/specs/notes