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

Text gets truncated at the end of the page when a long table is split #154

Open
mflorea opened this issue Sep 6, 2023 · 1 comment · May be fixed by #155
Open

Text gets truncated at the end of the page when a long table is split #154

mflorea opened this issue Sep 6, 2023 · 1 comment · May be fixed by #155

Comments

@mflorea
Copy link
Contributor

mflorea commented Sep 6, 2023

Consider this long HTML table with two columns:

<table>
  <tbody>
    <tr>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ut finibus risus. Proin quis nisi lorem. Sed ipsum ligula, egestas sed ipsum quis, rhoncus rhoncus arcu. Vestibulum eleifend sagittis risus vel consectetur. Duis eu molestie ipsum. Nullam vehicula tristique lacus eu facilisis. Mauris quis nisl a risus feugiat cursus. Aliquam in neque in sem placerat venenatis eu nec erat. Fusce mattis ipsum in vulputate vestibulum. Cras at sodales quam. Vivamus sagittis arcu ut enim fermentum scelerisque. Praesent porta vitae enim id tristique. In quis interdum massa. Nulla gravida diam ac posuere suscipit. Proin ac lorem bibendum, dapibus mauris ac, sollicitudin libero. Etiam quis turpis sodales, eleifend erat at, maximus ante. Nunc vehicula justo quis fringilla hendrerit. Curabitur diam ex, condimentum sit amet interdum vel, sodales ac ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum nec mattis diam, et aliquet purus. Integer sodales, arcu id facilisis suscipit, nibh nulla pulvinar diam, vel vehicula dolor dolor ac odio. Aliquam pretium, diam non pretium ornare, orci sem tempus massa, eget mollis leo nulla vel odio. Vivamus justo ipsum, malesuada ut erat at, facilisis rutrum lorem. Morbi sem dolor, laoreet ac dignissim eget, condimentum ut nisl. Donec quis dapibus quam, vel auctor metus. Vestibulum commodo placerat ligula, eu commodo erat efficitur eget. Suspendisse elementum dictum pharetra. Curabitur convallis pretium nibh, eu accumsan elit auctor in. Vivamus bibendum ornare enim. Nunc non rutrum mi. Aenean tincidunt sed ante sit amet imperdiet. In finibus, nunc non auctor venenatis, massa ante scelerisque nunc, eget placerat dolor dolor quis eros. Proin molestie venenatis nunc at pulvinar. Curabitur blandit, mi at dignissim ullamcorper, nisi felis vestibulum massa, euismod lobortis arcu massa ac enim. Vestibulum at turpis sagittis, bibendum est vel, lacinia risus. Suspendisse cursus, eros ut fermentum congue, augue magna congue felis, sed molestie felis purus eget magna. Vestibulum purus nulla, ullamcorper vitae nunc eget, ultricies pulvinar sem. Aliquam ac ligula ut libero fringilla convallis ut non enim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed placerat mollis quam id elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et porttitor velit. Phasellus quis velit velit. Donec enim ex, faucibus non enim at, eleifend bibendum augue. Nulla facilisi. Mauris dictum venenatis orci, a porta lacus faucibus nec. Sed dolor quam, condimentum vel erat sed, dapibus ultrices diam. Mauris lorem quam, tempor et aliquet quis, dictum eget nibh. Phasellus ultrices nunc quis risus malesuada vulputate. Integer mauris leo, rutrum in fringilla tempus, pellentesque et tellus. Sed imperdiet, massa vel tincidunt pharetra, magna risus viverra nibh, tempor cursus eros turpis vitae neque. Curabitur ornare rhoncus leo, sit amet efficitur arcu pretium eget. Quisque quis hendrerit augue. Aliquam erat volutpat. Etiam non odio risus. Nulla eros massa, molestie et gravida at, volutpat varius tortor. Donec vitae lorem magna. Fusce imperdiet ornare urna et tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam posuere venenatis lacinia. Praesent vel luctus odio. Donec tempor enim eu odio convallis imperdiet. Nulla interdum ex vel est mattis venenatis. Curabitur fermentum eleifend lorem quis malesuada. Pellentesque scelerisque nibh a orci consequat vestibulum. Nulla mi tortor, mollis nec mattis in, posuere sed nibh. Ut quis molestie arcu. Duis non ex arcu. Maecenas at gravida augue, et pellentesque libero. Aliquam erat mauris, tincidunt vel laoreet nec, varius eu dolor. Curabitur eu eros mi. Vivamus et mi consequat, semper lectus sed, sodales orci. Ut velit velit, pellentesque nec pellentesque vel, suscipit quis enim. Donec consectetur rhoncus purus in pharetra. Aliquam erat volutpat. In finibus eu diam ut tincidunt. Curabitur eget suscipit augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur at finibus leo. Etiam tincidunt massa nec feugiat suscipit. Nullam iaculis ipsum elit, vel bibendum magna pulvinar eu. Curabitur ut est in elit mollis viverra nec venenatis velit. Nulla nec elit mi. Ut pellentesque, turpis sed mattis elementum, ante odio placerat eros, a porttitor neque dui ut sapien. Nulla nisi libero, vehicula eu turpis eget, blandit maximus ex. Donec eget mollis velit, at suscipit ex. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut iaculis metus quis lacinia mattis. Nunc nisi est, suscipit ac erat et, convallis commodo purus. Curabitur vulputate, turpis eu rhoncus scelerisque, ligula elit posuere ligula, quis pulvinar ante libero ut lectus. Donec pellentesque nibh vel quam volutpat, nec ornare lorem tristique. Suspendisse sagittis, purus ut vulputate laoreet, purus ante malesuada purus, dignissim tincidunt massa arcu porta tortor. In dictum tellus vel augue vehicula consectetur. Phasellus maximus ligula non nisi iaculis lobortis. Quisque tincidunt ligula sit amet mi viverra lacinia. Nulla egestas eleifend enim sit amet tincidunt. In et risus mi. Donec pulvinar nulla nibh, at posuere justo porttitor vel. Aliquam vel molestie odio, id fringilla arcu. Aenean quis turpis arcu. Aliquam congue eu urna in eleifend. In hac habitasse platea dictumst. Quisque egestas vitae sem sit amet ultricies. Praesent ut varius nisi, quis fringilla lorem. Integer sagittis velit tortor, lobortis laoreet erat placerat eget. Aliquam cursus urna odio, sit amet congue nulla commodo ut. Quisque consequat vestibulum neque sed pellentesque. Sed vitae posuere massa. Ut aliquam orci mi, a euismod mi facilisis eget. Quisque odio orci, convallis nec enim vel, finibus commodo sem. Curabitur gravida neque sapien, vel blandit massa pharetra at. Mauris a diam eleifend, fringilla purus non, accumsan mi. Donec dolor metus, finibus non velit quis, tempus bibendum nisl. In mattis blandit sem eu sollicitudin. Suspendisse iaculis turpis eget purus tincidunt blandit. Nulla imperdiet fermentum sagittis. Nulla finibus ullamcorper ante sit amet tempus. Sed metus quam, pretium eu blandit et, laoreet quis nibh. Morbi nec mauris sodales, rhoncus diam sit amet, efficitur orci. Cras sed iaculis sem. Phasellus ullamcorper quam sed feugiat ultricies. Mauris vel ipsum ut augue pretium vestibulum. Maecenas eros felis, interdum quis accumsan nec, faucibus eget ipsum. Fusce fermentum suscipit felis, in suscipit velit placerat nec. Vivamus ornare vel quam ut lobortis. Phasellus laoreet diam nec ex maximus ultrices. Donec gravida mi vitae pellentesque facilisis. Etiam quis pretium sem. Curabitur volutpat libero massa, id iaculis velit imperdiet ut. Morbi ac justo eget diam tempor efficitur. Pellentesque a bibendum nibh. Mauris quis odio massa. In ullamcorper felis eu imperdiet mattis. Quisque et elit venenatis arcu fringilla hendrerit in id eros. Nunc et tellus id nibh convallis ullamcorper non quis enim. Maecenas vulputate urna id neque sagittis euismod. Nulla vitae urna eleifend, cursus purus eu, viverra neque. In hac habitasse platea dictumst. Etiam fermentum rhoncus velit eu varius. Nam quis maximus ipsum. Nullam consectetur lacus eget risus ornare, at commodo justo ultrices. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean ullamcorper diam ex, non ultricies diam molestie ut. Proin at magna molestie, convallis nibh sed, eleifend erat. Nullam et ex commodo, tristique leo in, imperdiet ante. Quisque venenatis purus ac ante pellentesque tempor. Praesent vehicula ex ipsum. Sed gravida erat vitae sapien imperdiet, non euismod leo dapibus. Sed ultricies egestas leo. Aenean ultricies blandit ligula posuere ultricies. Aliquam diam diam, finibus id lorem id, feugiat maximus ex. Nunc sit amet pharetra ipsum. Aliquam sed tempus tellus. Vivamus auctor quam id diam mollis varius. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean non sodales metus, non commodo arcu. Nam tincidunt nunc tellus, in luctus ipsum commodo vel. Mauris aliquet ante sed ex blandit mattis ut eu urna. Mauris euismod odio aliquam, placerat metus non, sodales libero. Donec eu lectus sed libero condimentum lacinia. Ut venenatis placerat tortor, sed commodo ante elementum ut. Nullam tristique dolor tortor, et lobortis est commodo at. Morbi ut dui sed tellus interdum placerat a sit amet odio. Nunc aliquet quis tortor a condimentum. Aliquam auctor luctus vehicula. Integer pharetra ex sit amet lacus scelerisque efficitur. Nullam dolor orci, pellentesque vel rutrum eu, lobortis ut mi. Donec molestie eros at sodales imperdiet. Pellentesque lacus sapien, pellentesque vitae ligula sed, lacinia viverra augue. In sem tortor, euismod volutpat mauris sed, venenatis elementum neque. Fusce venenatis dolor ac mauris ornare, vel malesuada mauris gravida. Aenean sodales sapien nec leo tincidunt convallis. Vivamus dignissim vel dui vitae commodo. Suspendisse semper, odio accumsan vulputate efficitur, ante velit tempor tortor, ut ullamcorper neque mi ut nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis volutpat, orci in rutrum semper, urna metus mollis diam, non vestibulum quam nulla vitae neque. Nullam at sodales magna, posuere elementum enim. Sed posuere suscipit bibendum. In aliquam purus a elementum malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ut ligula semper lorem interdum feugiat. Quisque id dapibus tellus. Suspendisse vitae ipsum sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec bibendum mauris ut convallis placerat. In non leo sed justo sodales imperdiet. Nulla tellus ante, rutrum nec nibh ac, viverra eleifend diam. Proin nibh ipsum, aliquam quis leo non, porta semper lorem. Vestibulum eu est hendrerit, tincidunt eros ut, iaculis diam. Nulla tincidunt, tellus at rutrum euismod, massa libero vulputate purus, ut scelerisque libero libero vel ligula. Mauris interdum libero sem. Etiam sit amet bibendum risus. Sed gravida erat leo, eget faucibus nibh vehicula vel. Nulla enim felis, consectetur porttitor malesuada in, porta id metus. Proin commodo gravida semper. Maecenas nunc dui, gravida et porttitor et, consectetur id magna. Phasellus maximus, massa sed tincidunt pharetra, ipsum nulla rutrum est, sed aliquam lectus neque eu tellus. Pellentesque elit leo, auctor nec dolor at, finibus gravida risus. Integer vestibulum pellentesque lacus, et imperdiet erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in hendrerit tellus. Cras laoreet ac massa eu facilisis. Quisque rhoncus eros nec orci blandit, ut feugiat tortor maximus. Sed volutpat risus ut lectus convallis volutpat.</td>
      <td>test</td>
    </tr>
  </tbody>
</table>

When this table is split between print pages, text gets cut at the end of the page. The reason is because:

  • table rows are not marked as "containers" so table cells are added one by one until they don't fit the current page
    • even if we mark the table row as a "container" it wouldn't solve the problem because if a table cell is split between print pages, the layout process starts from within the table cell on the next print page, so we still end up adding table cells one by one
  • when the current table cell doesn't fit the current print page we look for the overflow point, but we do this with an incomplete table row
    • even if we were to add an explicit width to the added table cells they would still extend to take the full row width (due to the missing cells that didn't fit)
  • we rebuild the table row after the break point is computed, which reduces the width of the previously added table cells, thus making the text overflow the print page and being truncated

The solution that worked for me and that didn't fail any of the existing automated tests was to:

  • rebuild the table row before finding the overflow point (i.e. make sure the row is complete when looking for the overflow point)
  • make sure we don't add (render) the same element twice
mflorea added a commit to mflorea/pagedjs that referenced this issue Sep 6, 2023
…agedjs#154

* Make sure the table rows are complete before finding the break token
@NigelCunningham
Copy link
Contributor

Hi there.

Please see #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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants