Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

page-breaks ignored #1551

Closed
vandersonmota opened this issue Feb 19, 2014 · 24 comments

Comments

@vandersonmota
Copy link

commented Feb 19, 2014

Hi guys, i am using the current stable version (0.12) and i'm having issues with page-breaks in tables.

it seems

page-break-inside: avoid;

and

  page-break-after: always;

are being ignored when rendering the pdf.

[]'s

@ashkulz ashkulz added the Invalid label Feb 20, 2014

@ashkulz

This comment has been minimized.

Copy link
Member

commented Feb 20, 2014

Please reopen the issue along with a sample HTML/CSS and mention the platform you are on, as without that no action can be taken.

@ashkulz ashkulz closed this Feb 20, 2014

@ichim-david

This comment has been minimized.

Copy link

commented Feb 28, 2014

@ashkulz I am having the same issue with both page-break-inside and page-break-after
I am attaching a link to a sample pdf.
https://drive.google.com/file/d/0B1zkqTH1V3Z9ZlJ5V2JicHJRSG8

On page 2 the "Secondary heading" has a rule of page-break-after: avoid and yet you can see that the heading is the last item on the second page and on page 3 there is a paragraph. If the page-break-after:avoid would have worked then the header should have appeared on the 3rd page since the paragraph below it didn't have enough room to go on slide 2.

page-break-before: always works though, if you look at page 4 the first paragraph has the following text "BEFORE this text we have a page-break always rule as such this text will show up on the next page"
As you can see the 3rd page still had room for the other paragraphs but because of the alway page break rule they went on the 4th page.

I will try to provide also an html and css but I think that this issue could be seen easily from my provided pdf output.

In case you were wondering the options that I've used for the pdf here they are:
wkhtmltopdf --disable-javascript --encoding utf-8 --footer-spacing 5 --footer-font-size 9 --footer-html http://localhost:8081/www/pdf.footer --footer-font-name Verdana --header-spacing 5 --header-font-size 9 --header-html http://localhost:8081/www/pdf.header --header-font-name Verdana --page-size A4 --page-offset 3 --margin-right 20 --margin-left 20 --margin-bottom 32 --margin-top 32 --print-media-type /tmp//201422417402055-1-751668-82756.pdf.html /tmp//201422417402055-1-751668-82756.pdf

@ashkulz

This comment has been minimized.

Copy link
Member

commented Feb 28, 2014

Without a small, self-contained HTML/CSS testcase which demonstrates the issue I will not be investigating it any further.

@gnapse

This comment has been minimized.

Copy link

commented Jun 19, 2014

Hi @ashkulz. I'm facing this problem of page breaks just after section headings. So I have created and uploaded a sample self-contained css/html file, and the resulting PDF I just generated with wkhtmltopdf. You can grab those files here.

As you'll be able to see in the css, there's a rule to avoid page breaks after html headings (h1, h2, .. h6). However, the headers for chapters 4 and 8 ended up being the last elements of their pages, with the actual chapter content following up at the beginning of the next page. If the page-break-after: avoid rule would have been respected, this would not have happened.

This was the command line to generate that file:

$ ./wkhtmltopdf --margin-bottom 20 --margin-top 20 sample.html --footer-center "[page]" sample.pdf
Loading pages (1/6)
Counting pages (2/6)
Resolving links (4/6)
Loading headers and footers (5/6)
Printing pages (6/6)
Done

And this was the version of wkhtmltopdf used:

$ ./wkhtmltopdf --version
wkhtmltopdf 0.12.1-79f3688 (with patched qt)
@ashkulz

This comment has been minimized.

Copy link
Member

commented Jun 20, 2014

I don't think that page-break-after: avoid is supported in webkit -- unless someone comes up with a patch for that, it is likely to remain unaddressed.

@mn4367

This comment has been minimized.

Copy link
Contributor

commented Jun 20, 2014

@vandersonmota, I slightly modified the body margins in your HTML and checked this with the current version of Safari (which uses WebKit).

bildschirmfoto 2014-06-20 um 15 23 44

So what @ashkulz says is correct, even a current version of WebKit doesn't support page-break-after: avoid (neither Firefox does).

@geri777

This comment has been minimized.

Copy link

commented Apr 27, 2015

For me page-break-after and page-break-before are totally ignored. There's no page break in the PDF. I am using the latest release (0.12.2.2). Is there anybody who can confirm that page-breaks are working at all?

<p>Text page 1</p>
<div style="page-break-after:always; border:1px solid blue;"></div>
<div style="page-break-before:always; border:1px solid red;"></div>
<p>Text page 2</p>

Thank you,
Geri

@mistajase

This comment has been minimized.

Copy link

commented Jun 9, 2015

Im also facing the same issue - page breaks work in v11 but not in v12

@geri777

This comment has been minimized.

Copy link

commented Jun 9, 2015

I could fix the problem by using the latest codebase (12.2.1) from the official project website. It did not work when I was trying to install the software via the ubuntu repository with "apt-get install wkhtmltopdf".
The version from http://wkhtmltopdf.org/downloads.html works. However it's about 5 times slower than the version in the repository. Can you confirm this?

@imjustd

This comment has been minimized.

Copy link

commented Jun 15, 2015

I also have the same issue with the page break directives in version 0.12.2.2 for windows. They all get ignored and the page is not broken as expected.

@dominicfollett

This comment has been minimized.

Copy link

commented Jun 18, 2015

Also encountering the same problem, but I have the latest code-base. Will this be fixed in the 13.x series?

@yhwu

This comment has been minimized.

Copy link

commented Jul 18, 2015

wkhtmltopdf 0.12.2.1 (with patched qt) on ubuntu 14 works with <P style="page-break-before: always">.
wkhtmltopdf 0.9.9 used to work with <hr/> to produce a new page.

@jesobreira

This comment has been minimized.

Copy link

commented Oct 16, 2015

I could get it to work by using @yhwu 's tip (<P style="page-break-before: always">) and --print-media-type argument.

@rudza

This comment has been minimized.

Copy link

commented Mar 9, 2016

I could get it to work by using @yhwu 's tip (

) and --print-media-type argument.

This worked for me too! :)

@mikeglaz

This comment has been minimized.

Copy link

commented Mar 9, 2016

How do I implement --print-media-type argument?

@rudza

This comment has been minimized.

Copy link

commented Mar 9, 2016

@mikeglaz Add it to the options Object:
var options = { pageSize: 'A4', marginLeft: '0', marginRight: '0', marginTop: '0', printMediaType: true };

@brpaz

This comment has been minimized.

Copy link

commented Sep 4, 2016

Cant get it to work even with --print-media-type option and the solution proposed by @yhwu

Using wkhtmltopdf 0.12.3 (with patched qt) on Linux mint 18.

@fatuhoku

This comment has been minimized.

Copy link

commented Oct 12, 2016

Are we masters of our technology or are they masters of us?

A part of me cannot believe that it's 2016 and we have no good way to tell the computer to put some text on the next page.

@Stibila

This comment has been minimized.

Copy link

commented Oct 24, 2016

In wkhtmltopdf 0.12.3 (with patched qt) page breaking works as long as style "page-break-before: always" is used on p element. Doesn't work with div element (and probably with other elements as well).

<!-- This works -->
<p style="page-break-before: always"></p>

<!-- This doesn't work -->
<div style="page-break-before: always"></div>

Argument --print-media-type is not necessary.

@leonardoteck

This comment has been minimized.

Copy link

commented Oct 25, 2016

I spend many, many days on this problem, I read the comments above nearly a thousand times, and finally I found a solution. I'm using v0.12.3.2 and my advice is:

  • Use the --print-media-type argument
  • Don't use <table>, <tr>, <td> nor display: table, display: table-cell...
  • Create a class with page-break-inside: avoid !important;, and use it in every single element, independent of it's type, that forms a line or block of content
@peaeater

This comment has been minimized.

Copy link

commented Dec 1, 2016

@Stibila I just tried wkhtmltopdf 0.12.4, and page breaking seems to work with div elements. I'm not using the --print-media-type argument.

<!-- works in 0.12.4 -->
<div style="page-break-before: always"></div>
@DarshanKsheerasagar

This comment has been minimized.

Copy link

commented Feb 17, 2017

Hello @peaeater

I am also using V 12.4 but still issue is there
issueimage

@michaelmartinnz

This comment has been minimized.

Copy link

commented Apr 13, 2017

wkhtmltopdf 0.12.2.1 (with patched qt)
<div style="width: 100%; page-break-inside: avoid;"><table>...</div>
works.

I'm not using the --print-media-type argument.

@gmkhussain

This comment has been minimized.

Copy link

commented Jun 26, 2018

use this classes for page break :

<style type="text/css" media="screen,print">
       /* Page Breaks */

/***Always insert a page break before the element***/
       .pb_before {
           page-break-before: always !important;
       }

/***Always insert a page break after the element***/
       .pb_after {
           page-break-after: always !important;
       }

/***Avoid page break before the element (if possible)***/
       .pb_before_avoid {
           page-break-before: avoid !important;
       }

/***Avoid page break after the element (if possible)***/
       .pb_after_avoid {
           page-break-after: avoid !important;
       }

/* Avoid page break inside the element (if possible) */
       .pbi_avoid {
           page-break-inside: avoid !important;
       }

   </style>
   

How to write html code see example.

<div class="page1 pb_after">
   content 1...
</div>
<div class="page2 pb_before pb_after">
   content 2.... <table>...</table> 
</div>

Table rows break... It works :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.