Plugin for sidenotes

This plugin proposes a script for sidenotes in Paged.js.

The plugin creates sidenotes from span elements in the text flow. It can be combined with the inline_notes plugin to create these span elements from listed notes, which are more common in conversion tools like Pandoc.

Note: The plugin moves notes if they overlap or if the last note overflows at the end of the page.

How to use the plugin

Add this folder to csspageweaver/plugins/.

Call the plugin in csspageweaver/manifest.json:

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

Configuration

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

    "plugins":{
        "sidenotes"
    },
    "pluginsParameters":{
        "sidenotes": {
            "selector": ".sidenote",
            "position": "outside",
            "reset": ".chapter",
            "align": ".chapter p:first-of-type"
        }
    },

All the parameters are optional.

selector → CSS selector for the note element (must be inline in the HTML), default is .sidenote
position → Specifies the position of sidenotes relative to the main text: options are "outside", "inside", "left", "right".
- 'outside': the left pages notes positonned on the margin left and the right pages notes on the margin right. This is the default value.
- 'inside': the left pages notes positonned on the margin right and the right pages notes on the margin left.
- 'left': the notes of both pages are positinoned on the margin left.
- 'right': the notes of both pages are positinoned on the margin left.
reset → CSS selector where you want reset note counter
align → Element to align the first note of the page to, if present on the 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="sidenote">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 sidenotes plugin in the manifest.json:

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

Styling notes

By default, the width of the notes is set on the corresponding margin where the notes are positioned. You can change this width by adjusting the padding-left and padding-right of your note elements.

To apply specific style depending on the left or right pages, uses the following CSS (where sidenote is the class of your notes):

.pagedjs_left_page .sidenote {
    padding-left: 40px;
    padding-right: 20px;
}
.pagedjs_right_page .sidenote {
    padding-left: 20px;
    padding-right: 40px;
}

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

.pagedjs_sidenote_call{
    color: blue; 
}
.pagedjs_sidenote_marker{
    color: violet; 
}

Possible improvement

Currently, there is no way to break a note element across two pages in Paged.js. If all the sidenotes on a page don't fit, the overflowing sidenotes are pushed to the next page. Implementing a feature to split notes across pages would enhance the layout flexibility.

3.7 KiB Raw Blame History