nbconvert: HTML page breaks not rendered on print

In order to control pagination when generating a PDF, I have tried using the CSS directive page-break-after:always to force page breaks. I then generate HTML using File > Print Preview in Jupyter and print from the browser.

For example, as described here, I might add a markdown cell containing

<p style="page-break-after:always;"></p>

However, these page break directives are not followed by any browser. I have also tried the fix suggest in ipython/ipython issue #5115 to no avail.

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 1
Comments: 16 (2 by maintainers)

Links to this issue

python - Best way to print Jupyter notebook slides? How to put a page break? - Stack Overflow

Most upvoted comments

The solution is to use LaTeX under the hood and put


\pagebreak

wherever you want a pagebreak in pdf output… Note: this doesn’t work for html export at the same time, there’s no good solution for that.

mpacer on Oct 24, 2017

Thank you – very helpful.

From: Finlay A.A. Small @.> Sent: Wednesday, November 1, 2023 2:22 PM To: jupyter/nbconvert @.> Cc: DGMacA @.>; Comment @.> Subject: Re: [jupyter/nbconvert] HTML page breaks not rendered on print (#607)

This works for me (in a markdown cell)

— Reply to this email directly, view it on GitHub https://github.com/jupyter/nbconvert/issues/607#issuecomment-1789043641 , or unsubscribe https://github.com/notifications/unsubscribe-auth/ATXAQ7HUD4EIDHWLTJVVGKDYCJLILAVCNFSM4DQEPTDKU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCNZYHEYDIMZWGQYQ . You are receiving this because you commented. https://github.com/notifications/beacon/ATXAQ7FKXBYFU3OTVHUUJT3YCJLILA5CNFSM4DQEPTDKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGONKRKHOI.gif Message ID: @.*** @.***> >

DGMacA on Nov 1, 2023

This works for me (in a markdown cell) <div style="page-break-after: always;"></div>

bigFin on Nov 1, 2023

Here’s one way to achieve page breaks in HTML (not latex) using page-break-before. This solution has some flaws, mentioned at the end, but it works.

Add the following to the custom.css file. Mine is in /Users/scott/.jupyter/custom/custom.css:

@media print {
  div.inner_cell {display: block}
}

In the notebook, where page breaks are desired, insert the following in a markdown cell:

<span style="page-break-before: always !important">⚀</span>

I use the ⚀ symbol to indicate that a page break has been added. Feel free to use any text or none at all.

Create an HTML version of the notebook, either by using “Print Preview” or “Download as HTML” in the File menu, or by using nbconvert.
Open and print the created HTML file in Firefox. I used Firefox v79 on a Mac. The page breaks should appear where the span was inserted.

The main problem with this approach is that an additonal blank page is inserted where the page breaks are indicated. I am not expert enough to explain why this happens. This is clearly a problem when printing to paper but the added pages can easily be removed by hand from a PDF.

The reason why this works is that divs with display: flex directives override page-break directives, as mentioned here. Testing revealed that only div.inner_cell needed to by modified to use display: block, and only when printing. Also mentioned in that page is that Firefox deals with “Twitter Bootstrap classes” better than other browsers. This may be why Firefox prints correctly where other browsers don’t. Again my lack of expertise fails me here. This approach works with Firefox but not with Safari or Edge.

scbarton on Aug 9, 2020