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

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

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

Using 'print' media type also enables some features in converter, as the HTML tables header and footer repeating in PDF page. You can find more about this feature in the Repeat HTML Tables Header and Footer section.

Below there is a HTML document which demonstrates how to define different styles for 'screen' and for '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