lure-2026/public/csspageweaver/plugins/footnotesFix/README.md
2026-01-10 18:33:22 +01:00

2.3 KiB

Plugin to fix footnotes reset issue

This plugin fix the issue of footnote reset.

You can use the current method to declare footnotes:

@page {
    @footnote {
      float: bottom;
    }
  }
  
.pagedjs_footnote { 
  float: footnote; 
}

This style is also added to the default stylesheet footnotes.css of this plugin. You can delete it if you have already declared footnotes in your own stylesheet (don't forget to remove it from the config.json as well).

How to use the plugin

Add this folder to csspageweaver/plugins/.

Call the plugin in csspageweaver/manifest.json:

	"plugins": [
        "footnotesFix",
        // other plugins ...
	],

Configuration

In manifest.json, you can modify/add some parameters:

    "plugins":{
        "footnotesFix"
    },
    "pluginsParameters":{
        "footnotesFix": {
            "selector": ".footnote",
            "reset": ".chapter"
        }
    },

All the parameters are optional.

  • selector → CSS selector for the note element (must be inline in the HTML), by default is .footnote
  • reset → CSS selector where you want reset note counter. If you want to reset on the page: page

Notes in HTML

In your HTML, the note must be a <span> inserted in the text, like this:

Donec tincidunt, odio vel vestibulum sollicitudin, nibh dolor tempor sapien, ac laoreet 
sem felis ut purus.&#8239;<span class=".footnote">Vestibulum neque ex, ullamcorper sit 
amet diam sed, pharetra laoreet sem.</span> Morbi cursus bibendum consectetur. Nullam vel 
lacus congue nibh pulvinar maximus sit amet eu risus. Curabitur semper odio mauris, nec 
imperdiet velit pharetra non. Aenean accumsan nulla ac ex iaculis interdum.

You can use the inline_notes` plugin to create these span elements from listed notes, which are more common in conversion tools like Pandoc.

The inline_notes plugin should be called before the footnotes plugin in the manifest.json:

	"plugins": [
        "inline_notes",
        "footnotes_fix",
        // other plugins ...
	],

It's possible to change the styles of call notes and marker notes directly in your stylesheet like in the following code:

::footnote-call{
    font-weight: bold;
}

::footnote-marker{
    font-weight: bold;
}