html2pdf Page Break Fixed in C# (Developer Tutorial)

In modern-day enterprises, digital documents are the typical place for sharing information and visual presentation. However, there can be times when information can get so cluttered within a single page, causing information overload that it's hard to understand which content relates to the topic. As such, a common tactic is to structure page breaks to allow the presenter to communicate the information clearly and for the readers to see the clearly defined sections between the document.

Although page breaks are common in documents, manually adjusting them is a hassle and not scalable. In companies where thousands of documents are created, it is far more efficient and ideal to automatically add page breaks. This allows developers to customize and apply the format to select their chosen documents.

In this article, we'll discuss adding page breaks using a C# PDF library called IronPDF. IronPDF's intuitiveness allows developers to set up page breaks on multiple forms of content quickly. We'll also discuss using the library and its customization and flexibility for creating visually appealing documents with page breaks.

IronPDF: The C# PDF Library

IronPDF is a flexible, easy-to-use, highly customizable C# PDF Library that allows developers, beginners, or veterans to manipulate and edit PDFs completely. It provides many ways for developers to convert different formats, such as HTML, RTF, and Images, into PDFs and further edit how it is rendered when converting to a PDF. Furthermore, IronPDF utilizes a Chrome rendering engine and, as such, is highly proficient in rendering HTML string, and it allows developers to use CSS styling further to customize the HTML document, giving developers an edge in terms of customization and visual presentation that you won't find anywhere else.

Since the library uses a Chrome rendering engine, what you see is what you get when rendering HTML, which makes it ideal for operations such as creating templates for page breaks so there are no mismatches from the templates. It is precisely how you designed the templates when converting them into PDFs.

Adding Page break on PDF

To illustrate the library's flexibility and ease of use, we'll use a code example showing how you would add page breaks programmatically.

In this scenario, we'll be using a table-based PDF as the input, and we'll see the difference between adding the page break immediately and after for visual clarity.

License Key

Before we start, please remember that IronPDF requires a licensing key for operation. You can get a key as part of a free trial by visiting this link.

//Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY";

//Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY";

'Replace the license key variable with the trial key you obtained
IronPdf.License.LicenseKey = "REPLACE-WITH-YOUR-KEY"

After receiving a trial key, set this variable in your project, and you're ready.

Input PDF

The following PDF will be used as input for our examples. It's a simple table with data clustered with separate information, making it hard to differentiate where the content ends.

Code example usage

using IronPdf;
const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div>
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");

using IronPdf;
const string html = @"
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div>
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>";
var renderer = new ChromePdfRenderer();
var pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Page_Break.pdf");

Imports IronPdf
Private Const html As String = "
  <table style='border: 1px solid #000000'>
    <tr>
      <th>Company</th>
      <th>Product</th>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronPDF</td>
    </tr>
    <tr>
      <td>Iron Software</td>
      <td>IronOCR</td>
    </tr>
  </table>
  <div style='page-break-after: always;'> </div>
  <img src='https://ironpdf.com/img/products/ironpdf-logo-text-dotnet.svg'>"
Private renderer = New ChromePdfRenderer()
Private pdf = renderer.RenderHtmlAsPdf(html)
pdf.SaveAs("Page_Break.pdf")

1. We first import the `Ironpdf` module to the code.
2. The HTML string shown above is the same as the input PDF object as shown above. However, in this case, we add `
   ` as the div tag to ensure the page breaks after the table to separate the content.
3. We then instinate the renderer.

4. We pass the HTML string to `RenderHtmlAsPdf`.

   5. Then finally, save the document as `Page_Break.pdf`.

   The more common method is to utilize CSS as this can be considered a legacy adds page breaks method to do inline styling with HTML.

Output PDF

As you can see the output does the page break immediately after the table.

Controlling Page Breaks with CSS

Since IronPDF can be customized with CSS, as it uses a Chrome rendering engine, we can take advantage of this and do CSS adds page breaks to specific elements and page breaks inside them, as well as specify which element shouldn't have a page break within it.

For example, although in the image above, the page break occurs after the table, there might be times when it happens within the table because of clutter.

To avoid that, we can use a specific CSS styling for the node and specify that we do not want to add a page break inside.

<div style='page-break-inside: avoid'>.
 <img src='no-break-me.png'>
</div>

<div style='page-break-inside: avoid'>.
 <img src='no-break-me.png'>
</div>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div style='page-break-inside: avoid'>. <img src='no-break-@me.png'> </div>

Adding the `page-break-inside:avoid` avoids page breaks inside the element. However, when doing this operation, ensure that this is applied to the parent div node of the element.

A similar operation can also be used for elements you want to specify to add the page-break-before.

<div style="page-break-inside: avoid;">
    <img src="no-break-me.png">
</div>

<div style="page-break-inside: avoid;">
    <img src="no-break-me.png">
</div>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div style="page-break-inside: avoid;"> <img src="no-break-me.png"> </div>

Since we can utilize HTML, we can further specify the elements of the nodes by drilling down the HTML node tree using Javascript and document.getElementById or using the familiar `var element document getelementbyid` to select the element by its ID and ensure each node is fully customizable.

Optimizing Image Quality and File Size

The page break setting is also closely related to Image Quality. You want to ensure that the page break setting doesn't affect the image quality by shrinking or scaling it on the next page.

As such, we can also use CSS to ensure the image quality is consistent throughout templates when we apply page breaks.

<div class="no-break">
    <img src="optimized-image.jpg" alt="Optimized Image" style="width:100%; height:auto;" type="image/jpeg" quality="80" compression="high">
</div>

<div class="no-break">
    <img src="optimized-image.jpg" alt="Optimized Image" style="width:100%; height:auto;" type="image/jpeg" quality="80" compression="high">
</div>

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'<div class="no-break"> <img src="optimized-image.jpg" alt="Optimized Image" style="width:100%; height:auto;" type="image/jpeg" quality="80" compression="high"> </div>

The CSS styling above ensures the image is consistent after page break operations. We first set the width to 100% of the page. The height can be auto-scaled. We guarantee the quality is at 80 with `image.compression` set to high, ensuring minimal loss in quality. This is especially true for PNG image compression and adding that property also enable png image compression.

Furthermore, IronPDF has additional rendering options when rendering HTML, the options are similar to when a user clicks on the printable PDF prompt and it creates user download prompt for the PDF with its printing settings. For a complete list of attributes, please refer to the API documentation.

Counterpart using JavaScript

Since IronPDF has the advantage of using a Chrome rendering engine, it also has the benefit of coming with a Node.js version that allows developers from different backgrounds to utilize this powerful library.

With the Node.js variant, developers have even more fine-tuned control over adding page breaks, as you have access to promise-based usage and methods such as the `onrejected true promise method` for debugging or progress tracking and its own intermediate functions as well.

Compared to a common library such as html2pdf with its jsPDF object's output method, IronPDF is more flexible and supports multiple languages, allowing developers with different language expertise to work on the same project.

Conclusion

Understanding how to use page breaks and how CSS affects the overall HTML is crucial in creating presentable and visually appealing documents for users. It allows readers to segregate the information they are reading to avoid information overload and confusion. Throughout this article; we talked about utilizing the powerful Chrome rendering engine that IronPDF utilizes to create page break templates automatically for templates and automation, streamlining the efficiency and scalability when creating these documents as well as reducing the prone to human error.

For developers who would like to try IronPDF, the library offers a free trial for $749 and upwards.