/    Sign up×
Community /Pin to ProfileBookmark

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

Copy linkTweet thisAlerts:
Jun 13.2019

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

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJun 13.2019 — Check if break-after or break-before helps you:

https://developer.mozilla.org/en-US/docs/Web/CSS/break-after
Copy linkTweet thisAlerts:
@psteinauthorJun 18.2019 — Hmm, thank you for the suggestion.

But I didn't understand. Shouldn't be it easier?

Have a look at the following sample webpage:

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

and the snapshot:

https://postimg.cc/NLFbQ99k

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
Copy linkTweet thisAlerts:
@cootheadJun 18.2019 — > @pstein#1604916

> **[color=#069] Why not?[/color]**

Well, one reason is that ``break-before: page;`</C> is nonsense.

Open your <STRONG>**create-free-dynamic-dns-websites.html**</STRONG> file,<br/>
scroll to line <STRONG>**#53**</STRONG> and place this code...
<CODE>`<i>
</i>@media print {
#main-head {
display:none;
}
h2[class="custom"] {
page-break-before: always;
}
}<i>
</i>`</CODE>

...<STRONG>**before**</STRONG> the closing <C>`&lt;/style&gt;`` tag.

Save the file. then open it your browser.

Click "File" and then "Print Preview" if using Firefox, or if using Chrome

the three little dots at the top right of the browser and then "Print".

You will then see the page breaks.

_coothead_
Copy linkTweet thisAlerts:
@psteinauthorJun 24.2019 — Hello coothead,

your solution would add a page-break ALWAYS before each <h2> element.

I don't want this. I want to add a single print page-break before (lets say the third <h2>) element ONLY:

How can I achieve this?
Copy linkTweet thisAlerts:
@cootheadJun 24.2019 — Hi there pstein,

To get a page break before **DuckDNS** use this...
``<i>
</i>h2[class="custom"]:nth-of-type(2) {
page-break-before: always;
}<i>
</i>`</CODE>
To get a page break before <STRONG>**No-IP**</STRONG> use this...
<CODE>`<i>
</i>h2[class="custom"]:nth-of-type(3) {
page-break-before: always;
}<i>
</i>`</CODE>
To get a page break before <STRONG>**FreeDNS**</STRONG> use this...
<CODE>`<i>
</i>h2[class="custom"]:nth-of-type(4) {
page-break-before: always;
}<i>
</i>`</CODE>
To get a page break before <STRONG>**Dynamic DNS Service by Dynu**</STRONG> use this...
<CODE>`<i>
</i>h2[class="custom"]:nth-of-type(5) {
page-break-before: always;
}<i>
</i>`</CODE>
To get a page break before <STRONG>**CloudDNS**</STRONG> use this...
<CODE>`<i>
</i>h2[class="custom"]:nth-of-type(6) {
page-break-before: always;
}<i>
</i>``

_coothead_
Copy linkTweet thisAlerts:
@SempervivumJun 24.2019 — @coothead#1604922 Hi coothead, are the guys at MDN publishing nonsense in your view?
This property (page-break-before) has been replaced by the break-before property.[/quote]
For compatibility reasons, the legacy page-break-before property should be treated by browsers as an alias of break-before.[/quote]
×

Success!

Help @pstein spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...