Printer Friendly CSS – II

What’s it About?

In Part I of this tutorial, you learned how to slice a design and write standards compliant Html/CSS. In this part, you will learn how to write printer friendly CSS. I will continue extending the same demo used in Part I and make it printer friendly.

Demo    Source

Understanding Media Type

When you link a stylesheet with your webpage, you can tell the browser that this CSS file is only for screen reading, projector, handheld device, printer, or all of them. Take a look at index.htm source, you will the following line:

<!-- YUI Reset Stylesheet -->
<link href="css/reset.css" type="text/css" rel="stylesheet" media="all" />

Note the media=”all” attribute of above link tag. This is attribute from where we can target the linked CSS to any kind of screen, device, or printer. In the above line of code, media=”all” means that linked file is targeted to all devices.

Most commonly used values of media attribute are:

  1. screen – Computer screens (this is default)
  2. projection – Projectors
  3. handheld – Handheld devices (small screen, limited bandwidth)
  4. print – Print preview mode/printed pages
  5. all – Suitable for all devices

Above description of each value is taken from W3C Schools.

The next stylesheet linked with the index.htm page of Demo of Part I is:

<!-- Stylesheet for screen -->
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />

Above stylesheet will only be applied if user is using desktop, notebook or a netbook. It will not be applied to printer or handheld device. You check yourself by Print Previewing it in your browser. Only the reset.css is applied in Print Preview, not style.css because the media attribute of reset.css is set to “all”.

Targeting Printer

Let’s extend the demo of Part I by adding an additional stylesheet which only targets printer.

<!-- Stylesheet for printer -->
<link href="css/printer.css" type="text/css" rel="stylesheet" media="print" />

Above stylesheet will only be applied when printing the web page because media attibute is set to “print”. I want to show you the final output of print stylesheet before showing you the source code so that you understand what output I want to acheieve with print.css

Print Preview of demo page

You can view this output by print previewing the demo page in your browser. You will note following major changes in the above Print Preview:

  1. All the colors are removed and fonts are changed.
  2. Top navigation is removed because there’s no need for it in hard copy
  3. All anchor tags have URL after them. This is very useful because the user can know (in the printed format) where anchor tag points to.

Note that this is all done using CSS only. Here’s the source of print.css

body {
    font-family: serif;
 
    /* pt is absolute unit commonly used in print designs */
    font-size: 12pt;
}
 
h1, h2, h3 {
    margin: 4px 0 8px 0;
}
 
h1 {
    font-size: 18pt;
}
 
h2 {
    font-size: 16pt;
}
 
h3 {
    font-size: 14pt;
}
 
a {
    color: #8b8b8b;
}
 
/* Following ':after' sudo selector is used to select element right after the 'a' */
a:after {
    /* Content is used to display (url) after every anchor (a) tag */
    /*
       Its value can be broken in 3 parts:
       " (" prints the opening parathesis with a space before it
       attr(href) gets the href value of 'a' tag
       ") " prints the closing parathesis with a space after it
    */
    content: " (" attr(href) ") ";
}
 
 
#main_menu {
    /* Remove top navigation menu */
    display: none;
}
 
#rainyImg {
    float: right;
    margin: 0 0 0 12px;
    text-decoration: none;
}
 
/*
 rainyImg is id of a tag which wraps the img
 here we are styling the url written after the rainyImg
*/
#rainyImg:after {
    /* I override the content property because I don't the want url of img to be written within parenthesis */
    content: attr(href);
 
    /*
       I displayed the url as a block because I don't want it to be on the same line on which img is displayed.
       If you remove this property, url will be displayed right after img.
    */
    display: block;
 
    font-size: 9.5pt;
    text-align: center;
    width: 272px;
}
 
#footer {
    margin: 20px 0 0 0;
    padding: 0 8px;
    text-align: right;
}
 
 
.clear {
    clear: both;
}

There are two most important things to note in the above CSS.

  1. a:after – This selector selects the element right after every anchor tag.
  2. content: ” (” attr(href) “) ” – This property prints the href value with parenthesis around it after every anchor tag in the page.

Review

In this tutorial you learned how to target printer using CSS. You learned how to remove elements that are not relevant to hard copy of webpage. Then you learned how to write url’s of links right after them.


comments powered by Disqus