HTML Rendering Settings

import {PdfDocument, WaitForType, CssMediaType, FitToPaperModes, PdfPaperOrientation, PaperSizeUnit} from "@ironsoftware/ironpdf";

(async () => {
    // Many rendering options to use to customize!
    const options = {
        paperSize: {
            unit: PaperSizeUnit.Inch,
            width: 12.5,
            height: 20,
        },
        printHtmlBackgrounds: true,
        paperOrientation: PdfPaperOrientation.Landscape,
        title: "My PDF Document Name",
        waitFor: {
            type: WaitForType.RenderDelay,
            maxWaitTime: 50, // in milliseconds
        },
        cssMediaType: CssMediaType.Screen,
        fitToPaperMode: FitToPaperModes.FitToPage,
        createPdfFormsFromHtml: true,

        // Supports margin customization
        margin: {
            top: 40, // millimeters
            left: 20, // millimeters
            right: 20, // millimeters
            bottom: 40, // millimeters
        },

        // Can set FirstPageNumber if you have a cover page
        firstPageNumber: 1, // use 2 if a cover page will be appended
    };

    // Render HTML page to PDF
    const pdf = await PdfDocument.fromUrl("https://angular.io/", { renderOptions: options });
    
    // Save the PDF
    await pdf.saveAs("my-content.pdf");
})();

HTML Rendering Settings

Many rendering options can be configured when rendering from HTML strings, files, or web URLs. The settings shown above include custom paper size with configurable measurement units, enabling HTML background, page orientation, document title, delaying the rendering process, specifying the CSS media type, selecting the paper mode, creating editable form fields, customizing margins, and adding page numbers.

The CSS media types "screen" and "print" are directives used to specify how styles should be applied to HTML documents based on the medium of display or output. When "screen" is chosen as the media type, it indicates that CSS rules are intended for on-screen viewing, optimizing factors like colors and layouts for digital screens. Conversely, when "print" is selected, it instructs the browser to apply styles tailored for printed documents, ensuring readability and proper formatting when the HTML content is printed on physical media. Sometimes, it is necessary to set the CSS media type to "screen" to display certain background images.

The delay in the rendering process primarily provides sufficient time for JavaScript or fonts to load.

<!-- Example of an HTML structure with CSS for print rendering -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Document</title>

    <!-- CSS styles for different media types -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        /* Styles specific for screen display */
        @media screen {
            body {
                background-color: #efefef;
                color: #333;
            }
        }

        /* Styles specific for print */
        @media print {
            body {
                background-color: #fff;
                color: #000;
            }
        }

    </style>
</head>
<body>
    <h1>Document Title</h1>
    <p>This is a sample document demonstrating different CSS media types.</p>
</body>
</html>

<!-- Example of an HTML structure with CSS for print rendering -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Document</title>

    <!-- CSS styles for different media types -->
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        /* Styles specific for screen display */
        @media screen {
            body {
                background-color: #efefef;
                color: #333;
            }
        }

        /* Styles specific for print */
        @media print {
            body {
                background-color: #fff;
                color: #000;
            }
        }

    </style>
</head>
<body>
    <h1>Document Title</h1>
    <p>This is a sample document demonstrating different CSS media types.</p>
</body>
</html>

HTML

Explanation:

HTML Structure: The code is structured in a standard HTML5 format with a <head> and <body> section.
Metadata: The meta tags define the character set and viewport for responsive design.
Stylesheet:
- Default body style: Sets the font family and margin applicable across all media.
- Screen Media Query: Applies a light gray background and darker text for digital screens.
- Print Media Query: Applies a white background and black text, typical for printing.
Example Usage: The given HTML and CSS structure helps demonstrate how different styles can be applied depending on whether the content is viewed on a screen or printed.