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

Quickly Create High Quality PDFs

Using CSS media types a HTML document can have one layout for screen, one for print , one for handheld devices. The @media rule allows different style rules for different media in the same style sheet in a 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.

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

Copy

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