search

Kozea / WeasyPrint

The awesome document factory
https://weasyprint.org
BSD 3-Clause "New" or "Revised" License
7.17k stars 680 forks source link

Page breaks are not honored on floating elements #2277

Open sebastien-coavoux opened 5 days ago

sebastien-coavoux commented 5 days ago

Hi,

I noticed that weasyprint does not honor the page break attributes when generating a pdf. Looks like a bug to me as it happens with a specific mix of div / css . See example below :

index.html 

<html>
<body class="dark">
<main class="page-content" aria-label="Content">

<div class="container experience-container">
  <h3>Title h3</h3>
  <div class="row clearfix layout layout-left" style="" >
    <div class="col-xs-12 col-sm-4 col-md-3 col-print-12 details" > <h4>Title h4</h4> </div>
    <div class="col-xs-12 col-sm-8 col-md-9 col-print-12"> IN DIV page break at end <p style="page-break-after: always;"></p>  </div>
  </div>

  <div class="row clearfix layout layout-left" style="" >
    <div class="col-xs-12 col-sm-4 col-md-3 col-print-12 details" ><h4>Title h4 II</h4> </div>
    <div class="col-xs-12 col-sm-8 col-md-9 col-print-12"> SHOULD BE ON NEXT PAGE <br /> </div>
  </div>

</div>

</main>
</body>
</html>

merged-css.txt

mv merged-css.txt merged.css
weasyprint -s merged.css -q index.html index.pdf && evince index.pdf

You should see no page break, and everything in the same pdf page.

I'm not a css guy, the file comes from a merge of bootstrap and other css files. I did not write them.

I noticed 2 things :

It is weird to me because all those classes don't mention page break avoid (even if there are page break avoid in the css).

Let me know if you see some obvious workaround for me. The html is generated but I can change the text inside the div (" IN DIV page break at end"). As of now I use the print to pdf from firefox that works, but not very fun to automate.

Thanks

liZe commented 10 hours ago

Hi!

That’s because col-*-* elements have position: relative set. According to the specification, break-after can break-before can only be set on "boxes in the normal flow of the fragmentation root", and that’s not the case for blocks with relative position.

liZe commented 10 hours ago

Well, it may be more complicated than that, relative is not absolute or fixed, and relative elements are actually in the flow.

liZe commented 9 hours ago

It’s actually because it’s float: left, and we don’t break on floating elements. We should though: "User agents should also apply these properties to floated boxes whose containing block is in the normal flow of the root fragmented element."

liZe commented 9 hours ago

Short sample to reproduce the problem:

<div style="break-after: page; float: left">float</div>
<div>end</div>