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.

Sign up for GitHub

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

Jump to bottom

Page breaks are not honored on floating elements #2277

Open
sebastien-coavoux opened this issue Oct 20, 2024 · 4 comments
Open

Page breaks are not honored on floating elements #2277

sebastien-coavoux opened this issue Oct 20, 2024 · 4 comments
Labels
bug Existing features not working as expected

Comments

@sebastien-coavoux
Copy link

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 :

  • If I remove both col-xs-12 and col-sm-8 on the line 5 (where the page break is). It works
  • If I move the page break out of the row clearfix layout layout-left div scope. It works.

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
Copy link
Member

liZe commented Oct 25, 2024

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
Copy link
Member

liZe commented Oct 25, 2024

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

@liZe
Copy link
Member

liZe commented Oct 25, 2024

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 liZe changed the title Page break attribute not always honored Page breaks are not honored on floating elements Oct 25, 2024
@liZe liZe added the bug Existing features not working as expected label Oct 25, 2024
@liZe
Copy link
Member

liZe commented Oct 25, 2024

Short sample to reproduce the problem:

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Existing features not working as expected
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@liZe @sebastien-coavoux