Paged.js — Notes About Notes

This article proposing new CSS specifications to design differents kind of notes in continuous and paged medias. SpecificationsW3CNotes

This is a companion discussion topic for the original entry at

Can a Hugo theme be released which can be used out of the box without any additional configuration to use this feature as well as the rest of the Paged.js features, please?

Also please list it as a Hugo theme in the official directory as usage will increase adaptation.


The footnote article you read is a proposal for specifications for the W3C. While we may include some things along those lines in paged.js later, the goal is to kickstart a conversation more than anything else today.

About a hugo theme for paged.js, you can add to any theme you’ll find around. You will need to change three lines in those themes, and you’ll be able to run Paged.js on any content you’d like.

I don’t think we’ll make a complete theme for making book with hugo soon, as it’s quite some work and we still have a lot to do on Paged.js, but we’ll hapily help anyone who would like to do so :).

Stay safe!

Regarding the sizing of note-areas:

  • we should be able to specify a note area takes the height of a paragraph or multiple paragraphs starting from a particular paragraph and ending at a particular paragraph.

Regarding side-notes:

  • we should be able to specify that they get auto-added to a one or more suitable note area specified on the left or right base on:
    • closeness to the text, i.e., text is more close to the left or right margin
    • space in the area to place it
  • some side notes may occupy an areas in the paragraph itself either to the left or right. E.g. image

Also, page elements can take different formatting and layout based on:

  • page and paper size
  • screen size
  • device and device orientation