Is there a way to fix jupyter notebook css to allow page breaks?

问题

I want to generate a pdf from a custom-formatted jupyter notebook. I have managed to do that with in two steps:

jupyter nbconvert --to html mynotebook.ipynb
Using chrome to-pdf-print chrome --headless --to-pdf-print=mynotebook.pdf mynotebook.html

I prefer to stick to the HTML/CSS stack - rather than LaTeX - as this gives the best results for graphs.

Now, the one thing that I can't get to work is to add page breaks using CSS page-break-before. This issue in the nbconvert project mentions that this switch is overriden somewhere in the CSS hierarchy, but a I can't figure out where.

What I would like is to use custom.css that contains something like this:

@media print {
h1, h2 {
    page-break-before: always;
    }
}

Testing with a simple html document like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="custom.css">
</head>
<body>
    <h1>Hello World (heading 1)</h1>
    <p>This is a web page.</p>
    <h1>Another heading 1</h1>
    <p>Some random text.</p>
</body>
</html>

gives me exactly what I want: a page break when printing with chrome.

But using custom.css with the static html output from nbconvert doesn't give page breaks. I have tried commenting out all instances of page-break-inside: avoid in the html, but still no luck.

I assume this must be fix-able within CSS, but I don't know how. Suggestions, anyone? Willing to pay for a solution, since I need it for a client. Note this is similar to this SO question, but thought it's best to start a new thread.

Environment: - OSX 10.14.5 - Python 3.7 - IPython 7.2.0 - nbconvert 5.4.1 - Chrome 76

来源：https://stackoverflow.com/questions/57834934/is-there-a-way-to-fix-jupyter-notebook-css-to-allow-page-breaks

标签

html

css

jupyter-notebook

nbconvert