Pixel Perfect HTML Formatting in IronPDF

To make your PDFs look perfect, you'll need to develop excellent HTML templates or work with a web developer to do it for you. This troubleshooting article is taken from a full tutorial on Debugging Your HTML.

1. Debug and Test your HTML

You can debug your HTML, CSS, and JS in your Chrome or a similar desktop browser. Then, when you know it works perfectly, connect it to IronPDF, and it will look identical to the way it looks in Chrome.

Basic Use

This code example will render PDFs that are pixel-perfect to the latest Chrome desktop browser.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Print'
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

Advanced HTML Development

Advanced Chrome user developers can achieve 100% precision by using IronPDF's default settings and enabling 'Emulate CSS media > Screen'. More information can be found here.

// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
// Create a new ChromePdfRenderer instance
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;

// Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = true;
' Create a new ChromePdfRenderer instance
Dim renderer As New ChromePdfRenderer()

' Set the CSS media type to 'Screen' for better preview consistency
renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen

' Ensure HTML backgrounds are printed
renderer.RenderingOptions.PrintHtmlBackgrounds = True
$vbLabelText   $csharpLabel

2. Compare the Result

To compare the result, open your HTML in the Chrome desktop web browser.

Note: Export any HTML string and assets to stand-alone HTML files and edit them manually, or ask a web developer to help.

Comparison of PDF result

3. Open the Print Preview Window (Ctrl+P on Windows)

You may need to change the paper size and enable printing background images in the Chrome Print dialog.

Print Preview Window

4. Select the 'Save as PDF' Option

Once Print to PDF in Chrome is perfect, IronPDF will match it.

Save as PDF option

5. Run IronPDF

Now the HTML is perfect, run it through IronPDF, and it will look identical. Use {PlaceHolders} to merge in customer data. The code examples at IronPDF Examples will really help!

If this tutorial does not help to resolve your issue, then please Contact Engineering Support, and we will adapt and improve our documentation to assist you further.

Chaknith Bin
Software Engineer
Chaknith works on IronXL and IronBarcode. He has deep expertise in C# and .NET, helping improve the software and support customers. His insights from user interactions contribute to better products, documentation, and overall experience.