How to Override CSS @page Rules with RenderingOptions

Brief Description:

When rendering HTML to PDF using IronPDF, developers may encounter unexpected behavior where the CSS @page rule overrides RenderingOptions settings such as PaperSize, PaperOrientation, and Margins. This article explains why this happens and how to resolve it.

Issue Summary:

IronPDF uses Chrome under the hood, which follows standard CSS rules during PDF rendering. If your HTML contains a @page CSS at-rule, its defined styles (e.g., margins, paper size, and orientation) will override IronPDF's RenderingOptions.

Example Scenario:

string html = @"
<!DOCTYPE html>
<html>
<body style='background-color:powderblue;'>
<style>
@page {
size: A3;
margin-top: 2in;
margin-bottom: 2in;
margin-left: 2in;
margin-right: 2in;
orientation: landscape;
}
</style>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>";

ChromePdfRenderer renderer = new ChromePdfRenderer();
renderer.RenderingOptions.MarginTop = 0;
renderer.RenderingOptions.MarginRight = 0;
renderer.RenderingOptions.MarginBottom = 0;
renderer.RenderingOptions.MarginLeft = 0;
renderer.RenderingOptions.PaperOrientation = PdfPaperOrientation.Landscape;
renderer.RenderingOptions.PaperSize = PdfPaperSize.Tabloid;

PdfDocument pdf = renderer.RenderHtmlAsPdf(html);
pdf.SaveAs("Output_.pdf");

Problem:

Despite explicitly setting RenderingOptions (e.g., no margins, Tabloid paper, landscape orientation), the final PDF uses the values from the @page rule:

A3 size
2-inch margins
Landscape orientation

Root Cause:

The CSS @page rule takes precedence over the IronPDF RenderingOptions because the Chrome renderer prioritizes document-level CSS styling when converting HTML to PDF.

Resolution:

To ensure IronPDF RenderingOptions are applied without being overridden:

Option 1: Remove or comment out the `@page` rule in your HTML

If you control the source HTML:

<!-- <style>
@page {
margin: 2in;
size: A3;
}
</style> -->

Option 2: Programmatically sanitize or strip `@page` styles

Use C# code to remove or replace the @page rule in the HTML before passing it to the renderer.

string sanitizedHtml = html.Replace("@page", "/* @page */");

Conclusion:

This behavior is expected given how Chrome handles CSS in headless rendering. For full control using IronPDF's RenderingOptions, ensure the HTML does not include conflicting @page rules.