Skip to content

Cut off page support

Jump to bottom Edit New page
danfickle edited this page Mar 10, 2019 · 3 revisions

NOTE: Cut-off page support was released with RC-18.

Consider the following example:

<html>
<body>
 <table>
  <tr>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
  </tr>
 </table>
</body>
</html>

By default, the content will overflow the right margin and be silently discarded. Depending on the data you are rendering, this may be disastrous. For this reason, this project introduces the possibility of inserting pages for cut off content:

<html>
<head>
<style>
@page {
  margin: 24px 10px;
  -fs-max-overflow-pages: 10; /* 0 by default */
  -fs-overflow-pages-direction: ltr; /* Also available is rtl */
  
  @top-left {
    /* Note the use of the -fs-if-cut-off function below. */
    content: "Page " counter(page) -fs-if-cut-off(" (continued)") " of " counter(pages);
    font-family: 'TestFont';
    font-size: 16px;
  }
}
td {
  background-color: lightblue;
  font-size: 14px;
  border: 1px solid blue;
  padding: 15px 4px;
}
</style>
</head>
<body style="font-family: 'TestFont'; color: black; font-size: 12px;">
 <table>
  <tr>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
    <td>Some_very_large_content_that_can_not_be_wrapped</td>
  </tr>
 </table>
</body>
</html>

The example above will insert up to ten pages with cut-off content. You can look at the generated PDF with one overflow page.

Notes

  • Cut off pages do not impact the page or pages counter.
  • Cut off content can include any type of box, not just tables.
  • The cut-off algorithm is aware of overflow:hidden and transforms.
  • When cut-off pages are enabled, even one pixel will generate a cut-off page so be careful of using width: 100% when you have a border. Either use box-sizing: border-box or take into account the width of both borders.
  • The fast renderer is required: builder.useFastMode().

Thank you for using this project.

Add a custom sidebar
Clone this wiki locally