Page break feature?

[ericphanson]

I wanted to have a cell that would insert a page break for customizing how PDFs render. I came up with

page_break = html"""
<style>
@media print {
   .noprint {
 	  margin: 0px;
	  visibility: hidden;
	  min-height: 0px;
          max-height: 0px;
   }
   .noprint kbd {
	  content: "";
   }
}
</style>
<script>
let cell = currentScript.closest("pluto-cell");
cell.style.pageBreakAfter = "always";
cell.style.borderBottom = "3px solid rgba(0, 0, 0, 0.25)";
cell.style.borderTop = "3px solid rgba(0, 0, 0, 0.25)";
cell.classList.add("noprint");
</script>
<kbd>Break</kbd>
"""

so that if you write page_break as a cell, it will make a page break in the PDF and hide that cell.

I thought others might find this useful or have ideas for how to improve it, and that something like this could be useful in PlutoUI. (Wasn't sure where to put it, let me know if this is the wrong place).

edit: tweaked it a few times in edits; it's tricky because display: none deletes it from the print mode (I think?) so it doesn't make the page breaks, but visibility: hidden makes it take up vertical space that can throw off the page breaks. So I tried to just make it take up no vertical space in print mode, but still exist.

[k12ish]

For a completely, invisible page break, a slimmed down version of your code did the trick:

html"""
<script>
let cell = currentScript.closest("pluto-cell");
cell.style.pageBreakAfter = "always";
</script>
"""

[holomorphism]

@ericphanson Thank you for sharing the code. I'm modifying Pluto's (hidden) presentation mode so that I can insert slide separators, and I was doing something similar to yours. (See the following link for more on presentation mode)

• https://github.com/fonsp/Pluto.jl/issues/118
• Building slides with Pluto.jl

I have tried your code and made some changes.

PAGE_BREAK = html"""
<style>
@media print {
	pluto-cell.pagebreak+pluto-cell pluto-output { page-break-before: always; }
	pluto-cell.pagebreak { display: none; }
	preamble { display: none !important; }
}
</style>
<script>
const cell = currentScript.closest("pluto-cell");
const cls = "pagebreak";
const setclass = () => cell.classList.toggle(cls, true);
setclass();
const observer = new MutationObserver(setclass);
observer.observe(cell, { subtree: false, attributeFilter: ["class"] });
invalidation.then(() => {
	observer.disconnect();
	cell.classList.toggle(cls, false);
});
</script>
<kbd>Break</kbd>
"""

• I changed it to apply page-break-before to the cell next to page_break. This way, it seemed sufficient to apply display: none to page_break.
• Since the preamble element in main has a height, I decided to hide it when printing. However, this may cause some problems.
• Changed <script> to use MutationObserver when adding a class to the page_break cell. I think I saw this writing style in @fonsp's notebook, but I don't understand it exactly. However, it seems that applying classList.add() once is sometimes not enough to apply the class correctly.