How to use Virtual Viewport and Zoom
In HTML to PDF rendering, the viewport plays a vital role in determining how the layout of the web page will be captured in the resulting PDF document. Specifically, it refers to the virtual screen size that the browser should render the web page into.
Zoom, within the context of HTML to PDF rendering, governs the scaling of web page content in the PDF document. The ability to fine-tune the zoom level provides a means to adjust the size of the content in the resulting PDF, ensuring it aligns with your desired layout and formatting.
Get started with IronPDF
Start using IronPDF in your project today with a free trial.
How to use Virtual Viewport and Zoom
- Download the IronPDF C# library for PDF rendering and viewport control
- Render HTML to PDF using different preconfigured modes
- Use the Chrome default and responsive CSS modes to achieve automatic layout in PDF
- Utilize scaling to zoom the content
- Configure 'fit to page' and 'continuous feed' for specific use cases
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");
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");
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");
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");
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");
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.