CSS for Print Media

Posted By : Ravi Kumar | 26-Dec-2014

 

CSS, one of the most important feature, specify how a document is to be presented on different media. For example on the screen, on paper and for other devices.

 

Some CSS properties works for specific media for example, the 'page-break-before' property only applies to paged media. However, CSS for different media types may share a same property, but require different values for that property. For example 'font-size' is useful for screen and print media. But both media type require different values for the common property. A document typically need larger font-size on screen than the paper. So it is important that a CSS or some part of it express which media type.

 

Recognized media types :

  • Media all : Suitable for all media devices.
  • braille : for braille tactile feedback devices.
  • handheld : for handheld devices.
  • embossed : for paged braille printers.
  • screen : for color computer screens.
  • speech : for speech synthesizers (CSS2 - 'aural' for this purpose).
  • tty : for fixed-pitch character grid media. For example teletypes, terminals, or portable devices with limited display capabilities.
  • tv : for television-type devices.
  • print: for documents viewed on screen in print preview mode and paged material.
  • projection : for projected presentations.

 

Specifying media-dependent CSS

Specify the target medium from a CSS with the @media or @import at-rules.

@import url("custom-fonts.css") screen;
       @media print {
      /*  CSS for print media goes here */
}

 

Specify the target medium within the document language.

For example : by using an ‘media’ attribute in ‘link’ element

<!DOCTYPE HTML>

<html>

   <head>

      <title>example for target media</title>

        <link rel="stylesheet" type="text/css"  media="all" href="gobal-style.css">

      <link rel="stylesheet" type="text/css"  media="print, handheld" href="print.css">

   </head>

   <body>

      <p>the main content goes here ….   </body>

</html>

 

The @media rule

It specify the target media types of a set of statements, separated by commas.
For example :

@media print {

    body { 

        font-size: 11pt;

        color: #000; 

    }

}

@media screen {

    body {

        font-size: 14px;

        color:#3a3a3a; 

    }

}

@media screen, print {

    body { 

        line-height: 1.3; 

    }

}

 

Note :Style rules apply to all media types outside of @media rules that the style sheet applies to. @rules inside @media are invalid in CSS2.1.

 

Important aspects while CSS for print media :

If don’t have any print value :

Use a no-print class for the elements that have no print value.

/* no-print class set not to display */

.no-print { display:none; }
<div id="globalHeader" class="no-print">
    .... <!-- no need to print header while printing the page -->
</div>

 


Page Breaks :
Page-breaks are very useful for separating the page content if they appearing not well by print prospectus.

 

For example : 

/* a class to be used for separating the page contents*/

.page-break { page-break-before: always; } 

<p> A long paragraph description goes here and page breaks will be used according to need ….</p>
<div class="page-break"></div> <!-- a page separator  -->
<p>Another paragraph content stars from here …...</p>

 


Important properties for print media :


Page Size : specifies the size and orientation of a page box.


E.g. :

@page {

  size: auto | auto | landscape | portrait | inherit;   /* auto is the initial value */

  margin: 10%; /* 'margin' property is relative to the target size */

}


Crop marks: specifies whether cross marks or crop marks or both should be rendered just outside the page-box edge. Marks are often added outside the page box in high-quality printing.

 

@page {

  marks: crop | none | cross | inherit;

 }


Right, Left and First Page : 
@page :right {
  margin-left: 2cm;
  margin-right: 3cm;
}


@page :left {
  margin-left: 3cm;
  margin-right: 2cm;
}


specify style for the first page of a document with the :first pseudo-class:

 

@page { margin: 1.5cm } /* All margin set to 1.5cm */

@page :first {
  margin-top: 12cm    /* 12cm margin for first page  */
}

 


Page Breaks : page-break-after, page-break-before , page-break-inside

 

@media print, @media screen {

    .page-break{

        /* only one at a time */

        page-break-before: auto | avoid | always | left | right | inherit ;

        page-break-before: auto | avoid | always | left | right | inherit;

        page-break-inside: avoid | auto | inherit;

    }

}

 

 

/* bootstrap print media CSS example */
@media print {

  * {

    color: #000 !important;

    text-shadow: none !important;

    background: transparent !important;

    box-shadow: none !important;

  }

  a,

  a:visited {

    text-decoration: underline;

  }

  a[href]:after {

    content: " (" attr(href) ")";

  }

  abbr[title]:after {

    content: " (" attr(title) ")";

  }

  .ir a:after,

  a[href^="javascript:"]:after,

  a[href^="#"]:after {

    content: "";

  }

  pre,

  blockquote {

    border: 1px solid #999;

    page-break-inside: avoid;

  }

  thead {

    display: table-header-group;

  }

  tr,

  img {

    page-break-inside: avoid;

  }

  img {

    max-width: 100% !important;

  }

  @page  {

    margin: 0.5cm;

  }

  p,

  h2,

  h3 {

    orphans: 3;

    widows: 3;

  }

  h2,

  h3 {

    page-break-after: avoid;

  }

}

 

I hope you found some important content here. Thanks for reading.

Ravi Kumar

 

 

 

About Author

Author Image
Ravi Kumar

Ravi is a creative UI designer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Ravi likes Tech Quizes and playing Football.

Request for Proposal

Name is required

Comment is required

Sending message..