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

Handle box-decoration-break #771

Closed
stolzweb opened this Issue Jan 18, 2019 · 11 comments

Comments

2 participants
@stolzweb
Copy link

stolzweb commented Jan 18, 2019

i know there is the closed issue #139. But i think i really don't have a chance to solve my problem without this css "box-decoration-break". In the attached Screen you can see the splitted grey box. On the second page the text starts at the top of the grey box, but i need there a padding between box and text. The grey box has a padding-top, but that does not help. Is there a possibility to solve this problem? I also would pay for the implementation :)
unbenannt-1

@liZe liZe added the feature label Jan 21, 2019

@liZe liZe changed the title box-decoration-break Handle box-decoration-break Jan 21, 2019

@liZe

This comment has been minimized.

Copy link
Member

liZe commented Jan 21, 2019

i know there is the closed issue #139.

That was 5 years ago. It's time to think of this now 😄.

Is there a possibility to solve this problem?

Yes, you're right, box-decoration-break is what you need.

I also would pay for the implementation :)

Thank you! If you're interested, you can contribute to our Patreon campaign. Some tiers give you the possibility to select an issue we'll work on. It's monthly donation but you can stop when you want.

@liZe liZe added this to the 46 milestone Feb 20, 2019

@liZe

This comment has been minimized.

Copy link
Member

liZe commented Feb 27, 2019

We should be able to fix #115 too.

@liZe

This comment has been minimized.

Copy link
Member

liZe commented Feb 28, 2019

I'm currently working on it on the box-decoration-break branch. It's far from being perfect for now, but it should fix your use case already. Feel free to test and tell me if it works!

@liZe

This comment has been minimized.

Copy link
Member

liZe commented Mar 15, 2019

What's left to do:

  • fix backgrounds (will probably never be done)
  • check inline boxes
  • fix #115
  • fix this test
  • add tests

liZe added a commit that referenced this issue Mar 15, 2019

liZe added a commit that referenced this issue Mar 15, 2019

Fix box-decoration-text for inline boxes
And add related tests of course!

Related to #771.
@liZe

This comment has been minimized.

Copy link
Member

liZe commented Mar 18, 2019

@stolzweb I'll add tests and merge the branch into master if everything goes well. I won't implement the background part of the spec if you're not interested in it. Feel free to test and tell me if everything's OK for you!

@liZe liZe closed this in 2fc8f39 Mar 19, 2019

@stolzweb

This comment has been minimized.

Copy link
Author

stolzweb commented Mar 19, 2019

Sorry i was verry busy the last view months with other projects. Thanks a lot for doing this great job! I just tested it in my project. There are some tiny issues which eventually could be fixed.

  • my grey box has a padding of 4mm and a margin-bottom of 4mm, inside this grey box is sometimes a table, while cutting the table, For my it looks like the padding bottom is not added after cutting the table.

Unbenannt
Unbenannt1

@liZe

This comment has been minimized.

Copy link
Member

liZe commented Mar 20, 2019

Sorry i was verry busy the last view months with other projects.

No problem!

  • my grey box has a padding of 4mm and a margin-bottom of 4mm, inside this grey box is sometimes a table, while cutting the table, For my it looks like the padding bottom is not added after cutting the table.

Small sample showing the problem:

<style>
  @page { size: 80px; margin: 0 }
  body { margin: 0 }
  table { border: 0; border-collapse: collapse }
  td { background: red; border: none; height: 20px; padding: 0 }
  section { padding: 10px; background: yellow; margin: 5px; box-decoration-break: clone }
</style>
<section>
  <table>
    <tr>
      <td>a</td>
    </tr>
    <tr>
      <td>b</td>
    </tr>
    <tr>
      <td>c</td>
    </tr>
    <tr>
      <td>d</td>
    </tr>
  </table>
</section>

liZe added a commit that referenced this issue Mar 20, 2019

@liZe

This comment has been minimized.

Copy link
Member

liZe commented Mar 20, 2019

my grey box has a padding of 4mm and a margin-bottom of 4mm, inside this grey box is sometimes a table, while cutting the table, For my it looks like the padding bottom is not added after cutting the table.

This problem has been fixed when using box-decoration-break: clone.

What's sad is that with slice (the default value, the default case before box-decoration-break was supported) the box may go further than the bottom of the page if the bottom padding or border is too wide. The bug is in WeasyPrint since the beginning and is not easy to fix, but it shouldn't bother you.

I've added a passing test for your clone case and a failing test for the slice case.

If everything's OK for you, I'll release the current master branch as version 46.

@stolzweb

This comment has been minimized.

Copy link
Author

stolzweb commented Mar 20, 2019

@liZe

This comment has been minimized.

Copy link
Member

liZe commented Mar 20, 2019

Version 46 has been released!

@stolzweb

This comment has been minimized.

Copy link
Author

stolzweb commented Mar 20, 2019

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.