# Pixel Perfect HTML Formatting in IronPDF
<div class="alert alert-info iron-variant-1" role="alert">
Your business is spending too much on yearly subscriptions for PDF security and compliance. Consider <a href="https://ironsoftware.com/enterprise/securedoc/">IronSecureDoc</a>, which provides solutions for managing SaaS services like digital signing, redaction, encryption, and protection, all for one-time payment. <a href="https://ironsoftware.com/enterprise/securedoc/docs/">Try it now</a>
</div>
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](/how-to/pixel-perfect-html-to-pdf/).
## 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.
```csharp
// 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;
```
### 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](https://developer.chrome.com/docs/devtools/css/print-preview/).
```csharp
// 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;
```
## 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.
## 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.
## 4. Select the 'Save as PDF' Option
Once Print to PDF in Chrome is perfect, IronPDF will match it.
## 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](https://ironpdf.com/examples/using-html-to-create-a-pdf/) will really help!
If this tutorial does not help to resolve your issue, then please [Contact Engineering Support](/troubleshooting/engineering-request-pdf/), and we will adapt and improve our documentation to assist you further.
Your business is spending too much on yearly subscriptions for PDF security and compliance. Consider IronSecureDoc, which provides solutions for managing SaaS services like digital signing, redaction, encryption, and protection, all for one-time payment. Try it now
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 instanceChromePdfRenderer renderer = new ChromePdfRenderer();// Set the CSS media type to 'Print'renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print;// Ensure HTML backgrounds are printedrenderer.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 instanceDim renderer As New ChromePdfRenderer()' Set the CSS media type to 'Print'renderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Print' Ensure HTML backgrounds are printedrenderer.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
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 instanceChromePdfRenderer renderer = new ChromePdfRenderer();// Set the CSS media type to 'Screen' for better preview consistencyrenderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen;// Ensure HTML backgrounds are printedrenderer.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 instanceDim renderer As New ChromePdfRenderer()' Set the CSS media type to 'Screen' for better preview consistencyrenderer.RenderingOptions.CssMediaType = IronPdf.Rendering.PdfCssMediaType.Screen' Ensure HTML backgrounds are printedrenderer.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
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.
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.
4. Select the 'Save as PDF' Option
Once Print to PDF in Chrome is perfect, IronPDF will match it.
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.
Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.
