Handle break-inside: avoid on tr tags

[tomaszn]

Since commit 222677d table cells are split between pages, and break-inside: avoid is ignored.

[grewn0uille]

Hello!
It’s now normal that WeasyPrint is able to split table cells, please see #36.
But it’s strange that break-inside: avoid is ignored. Can you please share the related HTML/CSS?

[tomaszn]

I made a reduced test case, but weasyprint CLI command hangs on it (with 100% CPU usage).

https://codepen.io/3yy/pen/BawgMGK

[liZe]

I made a reduced test case, but weasyprint CLI command hangs on it (with 100% CPU usage).

This test case actually shows that break-inside: avoid is supported 😄. The problem is that it shouldn’t cause an infinite loop, but it should break the cell instead. That’s what happens when a block is higher than the page height, the specification allows to break the block. This is now fixed in the 54.x branch.

Going back to your issue, here is an example showing that break-inside: avoid works (at least in this example):

<style>
  @page { margin: 0; size: 3.5cm }
  body { margin: 0 }
  td { line-height: 1cm; orphans: 1; widows: 1 }
</style>

<table>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td style="break-inside: avoid">b<br>c<br>d</td>
  </tr>
</table>

<table>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>b<br>c<br>d</td>
  </tr>
</table>

In the first table, break-inside: avoid avoids the page break inside the second cell, and puts it on the second page. In the second table, the cell is broken as expected.

[nicolas-chaulet]

Hey! Just stumbled across it and yes with one cell per row you are correct, but when there are multiple cells per row then the row gets split, is this to be expected?

<style>
  @page {
    margin: 0;
    size: 3.5cm;
  }
  body {
    margin: 0;
  }
  td {
    line-height: 1cm;
    orphans: 1;
    widows: 1;
  }
</style>

<table>
  <tr>
    <td>cc</td>
    <td>a</td>
  </tr>
  <tr style="break-inside: avoid">
    <td>cc</td>
    <td style="break-inside: avoid">b<br />c<br />d</td>
  </tr>
</table>

<table>
  <tr>
    <td>a</td>
  </tr>
  <tr>
    <td>b<br />c<br />d</td>
  </tr>
</table>

[liZe]

Hey! Just stumbled across it and yes with one cell per row you are correct, but when there are multiple cells per row then the row gets split, is this to be expected?

Hmmm… It’s probably because break-inside: avoid is not supported on tr tags. But break-inside: avoid seems to work correctly on td, don’t you think?

[nicolas-chaulet]

Yeah td are totally fine, I could not find resources as to the fact that they are not supported on tr tags though

[liZe]

Yeah td are totally fine, I could not find resources as to the fact that they are not supported on tr tags though

Then that’s the bug we’ll fix!

[nicolas-chaulet]

Ha! Amazing!

[liZe]

Thanks for the bug report! The different commits listed here:

• avoid the infinite loop for big unbreakable cells,
• improve the margin-break management, enough to remove a workaround for table cells’ first child top margin,
• handle page-break: avoid for table rows.

These fixes are available in the master and 54.x branches, and will be included in 54.1. Real-life tests and feedback are welcome!

[tomaszn]

How is rowspan on table cells honored? Because probably all cells in a row should start together:

    <style>
        @page {
            height: 6cm;
        }
        td {
            break-inside: avoid;
            border: red 3px solid;
        }
    </style>
    <div>
        <table>
            <tr>
                <td rowspan="2">
                    a<br>
                    a<br>
                    a<br>
                    a<br>
                    a<br>
                </td>
                <td>
                    X<br>
                    X<br>
                    X<br>
                </td>
            </tr>
            <tr>
                <td>
                    Y<br>
                    Y<br>
                    Y<br>
                </td>
            </tr>

[liZe]

How is rowspan on table cells honored?

Well, I suppose that nobody on Earth (or on another planet) knows that.

Tables are not fully specified. rowspan and colspan attributes can give different renderings on different web browsers. Parallel table cells fragmentation is not tested by the W3C. Some browsers even don’t implement "simple" page break properties correctly in tables (🎁 a 20-year-old Firefox bug 🎁).

So… 😀

For now, we’ll assume that fragmentation of break-inside: avoid-cells with a rowspan attribute is undefined. As long as the content is displayed, let’s say that it’s OK. If you have real use cases that can’t be solved with the current implementation, you can open a new issue with a sample, but we can’t promise that we’ll solve it soon.

[tomaszn]

Your knowledge about these technologies is astonishing!

Chromium doesn't support this specific combination either. My use case is on screenshots in the bug description, which I guess is not that uncommon in reports (pivot tables etc.).

I started using WeasyPrint because it was the only engine that didn't split the rowspanned cells :-)

[liZe]

I started using WeasyPrint because it was the only engine that didn't split the rowspanned cells :-)

🤣

If you can change the HTML file, you can put rows with rowspan cells in tbody tags and set break-inside: avoid on these tbody tags.