The latest build supports multipass layout through JavaScript. This is very powerful: you can write a script to analyze the layout generated in a first pass, make changes, and rerun the layout process.

In a small two-column demo document, sidenotes that naturally appear in the first column are shown on the left side. And sidenotes in the second column are shown on the right side. This is done by adding a class name to elements based on which column they naturally appear in ("col1", "col2").

Also, the script adds class names based on which page an element appears on ("odd", "even", "page3").

https://css4.pub/2020/sidenotes/index.pdf
https://css4.pub/2020/sidenotes/index.html

The script uses the new multipass feature which has recently been added. Therefore, you will need the latest Prince build to test:

https://www.princexml.com/latest/

To make sure you run the correct version, run:

prince --version

To format the the test document yourself, run:

prince --javascript https://css4.pub/2020/sidenotes/index.html -o sidenotes.pdf

Edited 28 May 2020 by howcome

Really interesting!
Does the system allow for more than one rerun? And if so, does it allow for unspecified amounts?

Say something like an self-analyzing looping function?

Edited 27 May 2020 by JohannesHHL

Oh, yes!

You register the function Prince.registerPostLayoutFunc(func), which is called after layout finished, similar to the current oncomplete event. If this function modifies the DOM, Prince will perform layout again on the updated document, before generating the PDF.

The post layout function can register itself, or another post layout function, in order to repeat this process multiple times!

By default the number of passes is limited to two, but this can be increased by using the --max-passes=N command-line option."

I ran out of memory trying to imagine possible side effects of self-analyzing loops

In the demo document I posted, the first run is for layout, and the second is for styling. That is, in the first run, all elements are laid out on pages. In the second run, these elements are styled with colors and such, and moved -- but only in ways that would not cause reflow.

Indeed, if you were to make reflow-causing changes, more runs could be beneficial. Show us!

Edited 27 May 2020 by howcome

@csant Ah great - thanks for the documentation! 😊

@howcome I think we have an process which could use this feature, will report back if I have any comments or questions regarding the feature. 👍

Here's another sidenote demo which relies on multipass:

http://www.css4.pub/2020/sidenotes/top.pdf
http://www.css4.pub/2020/sidenotes/top.html

In this demo, sidenotes are placed in the margin area, stacked from the top. The sidenotes are absolutely positioned by setting a style attribute with a carefully computed 'top' value. Sidenotes remain on the page where they naturally occur.

Yet another variation, one where the figure caption is placed in the margin, below or above the figure depending on the figure's placement on the page.

http://www.css4.pub/2020/sidenotes/caption.pdf
http://www.css4.pub/2020/sidenotes/caption.html

Edited 29 May 2020 by howcome

Here's a document with several types of sidenotes: (1) baseline-aligned sidenotes (2) top-of-page-aligned sidenotes, and (3) sidenotes placed above or below full-width figures. The script tries to detect and avoid overlap in the margin area, and images are (slightly) resized to align with the text. This solution is not fully battle-tested yet, but it shows potential.

http://www.css4.pub/2020/christian-krohg/hg.pdf
http://www.css4.pub/2020/christian-krohg/hg.html

To format yourself, run:

prince --javascript --max-passes=3 http://www.css4.pub/2020/christian-krohg/hg.html -o hg.pdf

Edited 8 Jun 2020 by howcome

You can run the example above in Prince 14 with:

prince -j http://www.css4.pub/2020/christian-krohg/hg.html -o hg.pdf