Select a Target Media Type and Render HTML to PDF with Screen or Print Layout

In this demo you learn how to change the CSS properties of a HTML document based on media type selection. By default the HTML to PDF converter will render the HTML document for 'screen', but this can be changed when another media type is assigned to HtmlToPdf.MediaType property.

For example, when this property is set to 'print' the CSS properties defined by the '@media print' rule will be used when the HTML is rendered instead of the CSS properties defined by the '@media screen' rule.

HTML Code

<html>
<head>
    <title>
        HTML to PDF Rendering Changes Based on Selected Media Type
    </title>
    <style type="text/css">
        body {
            font-family: 'Arial';
            font-size: 16px;
        }

        @media screen {
            p {
                font-family: Verdana;
                font-size: 14px;
                font-style: italic;
                color: Green;
            }
        }

        @media print {
            p {
                font-family: 'Courier New';
                font-size: 12px;
                color: Black;
            }
        }

        @media screen,print {
            p {
                font-weight: bold;
            }
        }
    </style>
</head>
<body>
    <br /><br />
    The style of the paragraph below is changed based on
    the selected media type:
    <br /><br />
    <p>
        This is a media type selection test. When viewing on screen
        the text is bigger, italic and green. When printing the
        text is smaller, normal and black.
    </p>
</body>
</html>

Select Media Type: