Select Media Type to Render a Different Layout for Screen or for Print

Using CSS media types, an HTML document can have one layout for screen and a different layout for print. The @media rule allows different styles for different media types within the same HTML document.

By default, the HTML to PDF converter renders the HTML document for 'screen', but this can be changed by assigning another media type to the MediaType property. For example, when this property is set to 'print', the CSS properties defined by the '@media print' rule are used when the HTML is rendered instead of the CSS properties defined by the '@media screen' rule.

Using the 'print' media type also enables some features in the converter, such as repeating HTML table headers and footers on PDF pages. You can find more information about this feature in the Repeat HTML Tables Header and Footer section.

Below is an HTML document that demonstrates how to define different styles for the 'screen' and 'print' media types.

HTML Document with Different Styles for Screen and Print

 
<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>

See Also