Get started with IronPDF

Start using IronPDF in your project today with a free trial.

First Step:
green arrow pointer



Paper Fit Modes

Access the PaperFit field in RenderingOptions to invoke a preset method that can be used for a specific rendering type and mode. Let's examine each PaperFit mode in more detail by rendering the well-known Wikipedia page for comparison.

Chrome Default Rendering

Lays out PDF pages in the same way as they appear in Google Chrome's print preview. This method configures the rendering options to mimic the appearance of a web page when printed from Google Chrome's print preview. The responsive CSS viewport for the specified paper size is interpreted based on the width of that paper size. Use the UseChromeDefaultRendering method to configure this.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-default-chrome.cs
using IronPdf;

// This script demonstrates how to render a web URL as a PDF using IronPdf's ChromePdfRenderer.

// Create an instance of ChromePdfRenderer to handle the rendering of PDFs using a Chrome-based engine
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure rendering options to use default Chrome settings for paper size and layout.
// This ensures that the PDF output is consistent with Chrome's default view settings.
renderer.RenderingOptions.PaperFit.UseChromeDefault();

// Specify the web URL and render it to a PDF document
// In this case, we are rendering the Wikipedia main page.
// Ensure that the specified URL is correct and accessible.
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

// Save the rendered PDF document to a file.
// The resulting PDF will be named "chromeDefault.pdf" and stored in the current directory.
pdf.SaveAs("chromeDefault.pdf");
$vbLabelText   $csharpLabel

Responsive CSS Rendering

In responsive CSS mode, you can specify a viewport width by passing a value to the UseResponsiveCssRendering method. The default viewport width is 1280 pixels. As you may have noticed, the viewport unit is pixel-based, representing a virtual browser viewport for responsive CSS designs.

Responsive CSS is used to define the rendering of HTML based on the ViewPortWidth parameter, scaling the content to fit the width of the specified paper size.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-responsive-css.cs
using IronPdf;

// Create an instance of ChromePdfRenderer, which will render HTML to PDF
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure rendering options for accurate responsive design representation
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering = true; // Enable CSS responsive rendering for 1280px width
renderer.RenderingOptions.HtmlMediaType = IronPdf.Rendering.PdfHtmlMediaType.Screen; // Specify screen media type for CSS

// Render the Wikipedia main page as a PDF document
// RenderUrlAsPdf takes a URL and converts the web content to a PDF format
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

// Save the rendered PDF document to the local file system with the name "responsiveCss.pdf"
pdf.SaveAs("responsiveCss.pdf");
$vbLabelText   $csharpLabel

Scaled Rendering

The UseScaledRendering method adopts a layout that mimics the behavior of 'Chrome Print Preview' for a specified paper size. It also provides an additional zoom level that developers can manually adjust. This method enables the option to scale the content according to the input zoom percentage.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-scaled.cs
// Import IronPdf to enable PDF rendering capabilities
using IronPdf;

// Instantiate a ChromePdfRenderer object to render PDFs using the Chrome rendering engine
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure rendering options for scaled rendering
// PaperFit determines how the content fits on the page.
// Use Scale to specify a custom scaling factor.
// The scale factor is set to 180% of the normal size.
renderer.RenderingOptions.PaperFit = IronPdf.Rendering.PaperSizeFitType.Scale; // Ensures scaling is used
renderer.RenderingOptions.PaperFitScale = 1.80; // Sets the scale factor to 180%

// Render a web URL to a PDF document
// The given URL is the main page of Wikipedia
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

// Save the rendered PDF document to a file named "scaled.pdf" in the current directory
pdf.SaveAs("scaled.pdf");
$vbLabelText   $csharpLabel

Fit to Page Rendering

Conversely, 'fit to page' rendering scales content to fit the specified paper size. It measures the minimum HTML content width after rendering and scales it to fit the width of one sheet of paper where possible. The configurable minimum pixel width is used as a pixel-based minimum width for the document to ensure correct display and responsiveness to CSS3 layout rules.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-fit-to-page.cs
using IronPdf;

// Create a new PDF renderer instance using the Chrome rendering engine
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Configure rendering options to fit the webpage content to a single page
renderer.RenderingOptions.FitToPaperMode = IronPdf.Rendering.FitToPaperMode.SinglePage;

// Render the specified URL as a PDF document
// The "RenderUrlAsPdf" method converts the webpage at the given URL into a PDF document
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

// Save the rendered PDF document to a file named "fitToPage.pdf"
// The "SaveAs" method saves the PDF document to the specified file path
pdf.SaveAs("fitToPage.pdf");
$vbLabelText   $csharpLabel

Continuous Feed Rendering

Continuous feed rendering creates a single-page PDF that enforces the entire content's width and height to fit onto one page, making it suitable for documents like consumer bills or receipts. The default width for the PDF page is 80.0 millimeters, and the default margin is 5 millimeters. Let's render the 'receipt.html' file to PDF.

The ability to customize the page width and margin using the ‘width’ and ‘margin’ parameters provides flexibility, making it a convenient choice for creating concise, single-page documents.

:path=/static-assets/pdf/content-code-examples/how-to/viewport-zoom-continuous-feed.cs
using IronPdf;

// Create a PDF renderer object using IronPdf
ChromePdfRenderer renderer = new ChromePdfRenderer();

// Define the width for continuous feed rendering
int width = 90; // The width in millimeters. Adjust as needed for your specific printer or requirements.

// Define the margin for continuous feed rendering
int margin = 0; // Margin in millimeters. Set to 0 for minimum margins.

// Configure the rendering options for using continuous feed
renderer.RenderingOptions.PaperFit.SetContinuousPaper(width, margin);

// Render a local HTML file ("receipt.html") as a PDF document
// Ensure that "receipt.html" is in the same directory as the executing program, or provide the full path.
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("receipt.html");

// Save the rendered PDF document with the specified file name
// The PDF will be saved in the same directory as the executing program unless a full path is specified.
pdf.SaveAs("continuousFeed.pdf");
$vbLabelText   $csharpLabel

Frequently Asked Questions

What is the role of the viewport in HTML to PDF rendering?

The viewport determines the virtual screen size that the browser renders the web page into, affecting how the layout is captured in the resulting PDF.

How does zoom affect HTML to PDF rendering?

Zoom controls the scaling of web page content in the PDF, allowing adjustments to the size of the content to align with desired layout and formatting.

How can I start using IronPDF for viewport and zoom control?

To begin, download the IronPDF C# library for PDF rendering and viewport control from NuGet and explore different rendering modes like Chrome Default and Responsive CSS.

What is Chrome Default Rendering?

Chrome Default Rendering simulates the appearance of a web page as seen in Google Chrome's print preview, using the responsive CSS viewport for the specified paper size.

What is Responsive CSS Rendering?

Responsive CSS Rendering allows you to specify a viewport width, scaling the HTML content to fit the width of the specified paper size. The default viewport width is 1280 pixels.

How does Scaled Rendering work?

Scaled Rendering mimics 'Chrome Print Preview' behavior for a specified paper size and allows developers to adjust the zoom level to scale the content according to the input percentage.

What is 'Fit to Page' Rendering?

'Fit to Page' Rendering scales content to fit the specified paper size, using a configurable minimum pixel width to ensure correct display and responsiveness.

What is Continuous Feed Rendering?

Continuous Feed Rendering creates a single-page PDF that fits the entire content's width and height onto one page, ideal for documents like consumer bills or receipts.

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.