Set Different Layouts for Screen and Print in HTML to PDF Converter for .NET

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

For more details and C# and VB.NET code samples please visit the HTML to PDF Conversion Media Types online demo.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s