Welcome Pagedjs 0.1.42 —

Some news from paged.js and an update!
Specifications W3C updates page number

Hi there!

It’s been a while since we talked, but we have used the time wisely.

First, we were very happy to see Julie (along with Nicolas Taffin) and Fred in the line-up of the Open Publishing Fest talking about Paged.js. Their discussions and demos are pretty good examples of the use of Paged.js in the real world: Julie talked about her work on the Villa Chiragan, Nicolas focused on the ways C&F Editions are using paged.js for their new collections; and Fred showed an experiment of his, on using paged.js to render epub on the screen as fixed layout. Would printing epub be something worth having in the future? :)

Be sure to look in the archives at all the great content folks submitted to the fest.

Bug fixes and updates to paged.js

Basic support for correct borders on the page !107

We now handle border on the page as the specifications define it. The border will not be set as a border for your page anymore, but will be between the page margins and padding. If you want to have a drawn border on your page, you’ll be able to use box-shadow: inset.

Paged.js include the version in its header thanks to Guillaume (@mogztter),

Fixes for reset on page counter !128 and Fixes page counter !124

You can now reset the numbering of your page and set the number it starts from using, for instance, counter-reset: page 20. But when Guillaume starting to look at how it was supposed to work, he ended up with a tricky situation: setting reset anywhere in the CSS doesn’t seem to be valid CSS, but at the same time, it’s how the majority of all the other tools are working. We implemented a quick fix to help authors used to this way of writing css down, but we have a more in-depth article coming. Side note, you can now set up a custom increment for the page counter.

Updated page breaks on new named page !126

Guillaume also fixed a longtime bug, where a named page would create an empty page if it was the first page of the book.

Handling for nth-of-type and following (+) selectors !122, !125

Nellie McKesson, from the amazing Hederis helped all of us write better CSS by adding support for + and nth-of-type selector.

Prevent infinite loops when elements aren’t placeable !118

Pagedjs used to have infinite loops when trying when an element was bigger than the page. If that happens now, it will stop the rendering on the element that doesn’t appear on the page. No more linking from CPU and RAM.

Breaking change

If one of your scripts used breakToken to move things around, make sure to test it: Paged.js now stops rendering when the breakToken is the same on two consecutive pages.

Non-significant text handling: !115

This merge request ignores non-significant Node such as a Text node that is all whitespace, or a Comment node. It also preserves Text node that does not have any sibling such as empty ( ) or Text node with a sibling (Hello world). Here, the Text node after "Hello" and before the  element must be preserved. In this case, the textContent is updated to a single space: Hello world. This fixes a couple of issues with break-after: avoid. For more information about how HTML handle white spaces, you can head over to MDN.

Add filter hooks and modules: !116

Add a filter hook that happens just before the afterParsed() one. It allows filtering the content rendered by paged.js. For now, those modules are enabled by default:

WhiteSpaceFilter: remove whitespace when possible.
CommentsFilter: remove all comments.
ScriptsFilter: remove all script elements.
UndisplayedFilter: Mark elements set to display:none as undisplayed.

Allow setting margins without units: #112

@page {size: 0 0} is now rendered correctly.

Wait a frame before handling resize: !110

Thanks a lot to Edoardo Tona (@EdoardoTona) who helped us figure out a bug in Chrome when, sometime, the pdf output is different from the screen preview (on the last part of the page) and the print PDF. By waiting 1 frame, the content is now identical.

Many great code bug-fixes: Nicholas Wylie fixed the ordered list numbering, Gregorio Roper, @garoper, fixed the issue when using page counter and custom counters, and we updated to Pupeteer 3.

Thanks to everyone who contributed. You’re amazing.

Some interresting projects using Paged.js

Maëlle Salmon made a proof of concept to make Paged.js work on the server on a Hugo website: https://github.com/maelle/testbook.
The folks at Voting Works are building open-source voting systems for US elections. One of their projects, Vote by mail, uses Paged.js to generate voting ballots: “VotingWorks Vote-by-Mail makes scaling vote-by-mail operations quick and affordable”.

And that’s it for today.

If you find any bugs, or have any questions, or want to discuss anything, feel free to join us on our chat: mattermost.coko.foundation