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.

Nuget IconGet started making PDFs with NuGet now:

  1. Install IronPDF with NuGet

    PM > Install-Package IronPdf

  2. Copy the code

    new IronPdf.ChromePdfRenderer { RenderingOptions = { ViewPortWidth = 1280, Zoom = 1.8 } }
        .RenderUrlAsPdf("https://example.com")
        .SaveAs("zoomedViewport.pdf");
  3. Deploy to test on your live environment

    Start using IronPDF in your project today with a free trial
    arrow pointer

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;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering();

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("chromeDefault.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Chrome default rendering
renderer.RenderingOptions.PaperFit.UseChromeDefaultRendering()

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

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;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("responsiveCss.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Responsive CSS rendering
renderer.RenderingOptions.PaperFit.UseResponsiveCssRendering(1280)

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

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
using IronPdf;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("scaled.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Scaled rendering
renderer.RenderingOptions.PaperFit.UseScaledRendering(180)

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

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;

ChromePdfRenderer renderer = new ChromePdfRenderer();

// Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering();

// Render web URL to PDF
PdfDocument pdf = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page");

pdf.SaveAs("fitToPage.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

' Fit to page rendering
renderer.RenderingOptions.PaperFit.UseFitToPageRendering()

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderUrlAsPdf("https://en.wikipedia.org/wiki/Main_Page")

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;

ChromePdfRenderer renderer = new ChromePdfRenderer();

int width = 90;
int margin = 0;

// Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering(width, margin);

// Render web URL to PDF
PdfDocument pdf = renderer.RenderHtmlFileAsPdf("receipt.html");

pdf.SaveAs("continuousFeed.pdf");
Imports IronPdf

Private renderer As New ChromePdfRenderer()

Private width As Integer = 90
Private margin As Integer = 0

' Continuous feed rendering
renderer.RenderingOptions.PaperFit.UseContinuousFeedRendering(width, margin)

' Render web URL to PDF
Dim pdf As PdfDocument = renderer.RenderHtmlFileAsPdf("receipt.html")

pdf.SaveAs("continuousFeed.pdf")
$vbLabelText   $csharpLabel

Ready to see what else you can do? Check out our tutorial page here: Convert PDFs

Frequently Asked Questions

How can I render HTML to PDF with responsive CSS styling?

You can use IronPDF to render HTML with responsive CSS styling by leveraging its ability to support bootstrap and other CSS frameworks, ensuring your web page content is captured accurately in the PDF.

What is the importance of viewport in HTML to PDF conversion?

The viewport is crucial in HTML to PDF conversion as it defines the virtual screen size that the browser uses to render the page, directly impacting how the layout and design are captured in the PDF.

How do I adjust the zoom level when converting HTML to PDF?

With IronPDF, you can adjust the zoom level by specifying a scaling factor, which allows you to control the size of the content in the PDF to match your desired layout and presentation.

What is the Chrome Default Rendering feature in IronPDF?

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

How does Responsive CSS Rendering work when generating PDFs?

Responsive CSS Rendering in IronPDF lets you specify a viewport width, scaling the HTML content to fit the paper size. By default, the viewport width is set to 1280 pixels, ensuring content fits well within the PDF dimensions.

Can I use Scaled Rendering for custom zoom adjustments?

Yes, Scaled Rendering in IronPDF allows developers to adjust the zoom level by specifying a percentage, enabling precise control over the scaling of web page content in the PDF.

What is the benefit of 'Fit to Page' Rendering in PDF generation?

The 'Fit to Page' Rendering in IronPDF scales content to fit the chosen paper size, ensuring that a minimum pixel width is maintained, which is key for achieving proper display and layout consistency.

How does Continuous Feed Rendering differ from other rendering modes?

Continuous Feed Rendering in IronPDF creates a single-page PDF that accommodates the entire content's width and height, making it ideal for documents like consumer bills or receipts where full-page content is necessary.

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.