break inside avoid not working in ver 0.4.0 and worse than the previous version

[adeiming]

This is an old version, I don't know what version, but it was many years ago, this is how it should look

And this is the result of the latest version (0.4.0), where the signature is missing, even though it has used a break-inside: avoid

another example old (should be)

new (wrong result)

my point is to use the latest version, to fix the following problem, where no 3 is missing, and it's truncated instead,

but the problem is still the same, the funds actually worsen the previous results, like the picture above.

[julientaq]

calling @fchasen so he can have a look.

[julientaq]

Hi there,.

Chrome made a huge move toward printing, and we’re having a fun time trying to fix all that broke paged.js :) some readings:  https://developer.chrome.com/articles/renderingng-fragmentation/

we’re trying to get the hang of it.

[tassin-gauthier]

so this is chrome based issue ? if we use paged.js 0.3.0, we will still get the problem ?

[haube]

Hi, first many thanks for working on the topic.

Since Chrome 108? we also have problems in our print process.

if a table is broken up onto another page, the last table row of the first page is sometimes invisible. It can be selected and copied into the clipboard but is not printed or shown. It seems to happen when the last row is overflowing only a mm or few px into the footer area (2cm from the bottom).

On the attached screenshot the "invisible" TR is selected with the dom selector and highlighted. Followed by the Footer and Page Break.

As this is an urgent matter for us we came up with the following dirty hotfix as we noticed that chrome is showing the line if we change the height variable. We are not sure about the side effects this could have on other occasions.

/* global Paged */

class ShowInvisibleRowsOnPageBreaks extends Paged.Handler {
  constructor(chunker, polisher, caller) {
    super(chunker, polisher, caller);
  }

  afterPageLayout(pageFragment) {
    pageFragment.querySelector(".pagedjs_area").style.height = "101%";
  }
}
Paged.registerHandlers(ShowInvisibleRowsOnPageBreaks);

• Is it "safe" for pagedjs for the height property to be changed in the afterPageLayout method or is this a bad idea?
• Is there maybe a more obvious solution?

[julientaq]

Hi there, Thanks for offering your solution, it’s really nice.

making change at the afterLayout shouldn’t break the lib.

That said, there is a new beta version coming up (it’s gonna soon be released on npm) that should fix some of it.

[julientaq]

Hi folks,

There is a new pagedjs beta 0.5

Can you test it and give some us some feedback? There are so many things that changed in there that we’d take all your inputs!

Thanks!

https://unpkg.com/browse/[email protected]/dist/

and https://www.npmjs.com/package/pagedjs/v/0.5.0-beta.0 for npm

[TorkilEide]

I found no difference in the new beta version on the issue I am experiencing, witch is page-break-inside: avoid on

element having no effect. Still not optimal! (loving the work you are doing in general though!)

[haube]

Hi, we went with the above mentioned fix with altering the height for a while. Since 2 days we have the beta in production to solve another problem.

1. (/) The marked line was visible in the html preview but disappeard in the Chrome Print Preview. I was able to reproduce it with similar amount of lines, but then it was also invisible in the html render aswell. Switching to beta 0.5.0 solved both issues.

2. With beta_0.5.0 i noticed a render artifact in a different document. After switching to the beta it was showing a empty table row which content got moved to the next page. It seems to me that the padding of 1.5mm from the cells is visible so that the row with just the padding is shown. There is no content missing though, all text is on the next page.

[janschreier]

I experienced issues with break-inside avoid in 0.4 as well and switching to 0.5 beta 1 solved most of these. However a new problem arose in a new project,

I have the following table structure

<tbody>
<tr>
  <td>
    <div class="rowgroup breakinsideavoid displaytable">
      <div class="tablerow">
        <div class="prodname">Potentially long name that might lead to this div getting split</div>
        <div class="tablecell">74</div>
        <div class="val">7,4</div>
      </div>
      <div class="tablerow">
        <div class="prodname">Potentially long name that might lead to this div getting split</div>
        <div class="val">67</div>
        <div class="val">5,2</div>
      </div>
    </div>
  </td>
</tr>
/* up to a 200 similar <tr>-Elements following */
</tbody>

the reason for using these divs is that several rows have to be shown next to each other without a page break. However this didn't work when the content of the div.prodname content was too long. Then this div was split into two divs by PagedJs and shown on different pages.

I checked in the debugger and ultimately the issue seems to be that the code ends in breakInsideAvoidParentNode() where node.dataset.breakInside === "avoid" is never true because the dataset.breakInside is never set. I searched for where it sould be set, but could not find it anywhere. (could be because of my limited JS skills, though).

Workaround

If I put a data-break-inside="avoid" on the

<div class="rowgroup breakinsideavoid displaytable" data-break-inside="avoid">

breakInsideAvoidParentNode() works as I would expect it to work.

However it seems that this is not the intended way of styling with PagedJS ;)

If required I can provide an example by email. Putting it up here would require a lot of cleaning out semi-confidential data.

[NigelCunningham]

Hi there.

Please see https://github.com/pagedjs/pagedjs/pull/171, which I've just submitted for consideration. It includes a large rework of the pagination code that should help with this issue. I'd appreciate your feedback.

Regards,

Nigel