How to insert "page break here when printing into pdf file"?

[pstein]

Assume I want to print a large web page into a pdf file by using the browsers pdf printer driver.

It works.

 

However the pdf page breaks created by the printer driver (or browser rendering engine?) are really at a bad place.

For a better printing result I would like to insert (manually) some page breaks into the HTML/CSS.

How can I achieve this?

Read: what are suitable HTML/CSS instruction for "insert page break here when pdf printing"?

Is there something like a <div style="pagebreakbefore" .....>?

Thank you

Peter

Edited June 13, 2019 by pstein

[Funce]

You won't be able to get it with inline styling but you can create a custom class that will do so for you.

@media print {
    .pagebreak {
        clear: both;
      	min-height: 1px;
        page-break-after: always;
    }
}

If you then add the pagebreak class to a <div> like class (not <span>) you'll then get a pagebreak immediately after the content its attached to. (this may be empty if desired as shown below)

<div class="pagebreak"></div>

 

[pstein]

Hmm, thank you for the suggestion.

But I didn't understand.

Have a look at the attached snapshot for sample webpage:

http://www.ilovefreesoftware.com/13/featured/create-free-dynamic-dns-websites.html

I want to have a (pdf) page-break BEFORE the headline "DUCKDNS".

I opened therefore Inspector of Firefox and inserted

break-before: page;

DIRECTLY for this element. But it is even not accepted.

Why not?

Peter

 

 

[dsonesuk]

Going by the warning symbol something is wrong! in implementation of this inline styling.

[Funce]

14 hours ago, pstein said:

I opened therefore Inspector of Firefox and inserted

break-before: page;

DIRECTLY for this element. But it is even not accepted.

Why not?

That's because break-before isn't a valid CSS declaration.

You can't write it in-line because it has to come out when printing only.

You need to write it in your CSS (<style> or .css file) as follows

@media print {
    .pagebreak {
        clear: both;
      	min-height: 1px;
        page-break-after: always;
    }
}

Then you need to add this element where you want a pagebreak

<div class="pagebreak"></div>