MrBool
You must be logged in to give feedback. Click here to login
[Close]

You must be logged to download.

Click here to login

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

[Close]

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to create a printer-friendly document with CSS

In this article, we will explain the steps used to create a printer-friendly document using CSS.

[close]

You didn't like the quality of this content?

Would you like to comment what you didn't like?

What do we do when we need to print a note? Perhaps you open a new pop up with the same template as your current document, but the pop up has no buttons, images, bars, and other stuff. When you open the new window, you might cause another database hit. Today, we will learn a different and better approach.

Let us suppose that we have the following table:

Listing 1: Illustrates the table

<table>
  <tr>
    <td>Navigate</td>
    <td>Content</td>
    <td><input type="button" value="ok"></td>
  </tr>
</table>

Now we want to print only the content cell and hide the other ones. We will make a new style CSS for this task:

Listing 2: Making a new style CSS

<style media="screen">
  .noPrint{ display: block; }
  .yesPrint{ display: block !important; }
</style> 
<style media="print">
  .noPrint{ display: none; }
  .yesPrint{ display: block !important; }
</style>

Now we just need to add this class to my controls or table cell (and also row):

Listing 3: Adding the class to the controls

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" value="ok" class="noPrint"></td>
  </tr>
</table>

As you can see, you can also add your CSS class into a button. Open this file in your browser. We will see Navigate, Content and the button in there. Now go to PrintPreview in your browser and see what happens. The Content and button are gone (hidden), and we can set the button to print.

Listing 4: Adding CSS class into a button

<table>
  <tr>
    <td class="noPrint">Navigate</td>
    <td class="yesPrint">Content</td>
    <td>My button is hidden <input type="button" 
          value="Print" class="noPrint" onclick="window.print();"></td>
  </tr>
</table>

Run your page and click Print. While the Web has moved masses of information from printed paper to the computer monitor, many people still enjoy consuming information the old fashioned way - by reading it off of a piece of paper. When printing an article, though, it's clear that all the user wants to see is the text of the article. At no point will the advertisement or navigational hyperlinks be of any interest to the reader. For this reason, many Web sites offer a "printer-friendly" version of the Web pages, one that strips out all the superfluous material.

Here in we will briefly enumerate the variety of ways one can create printer-friendly Web pages. We will then focus on one particular method: using CSS.

Creating a Separate Web Page for the Printer-Friendly Page

One option for creating a printer-friendly Web page is to create a single page whose sole responsibility is to display the printer-friendly version of a Web page. The PrintPage.asp Web page receives through the querystring the URL of the page to render in a printer-friendly format. This page then accesses the specified Web page using the FileSystemObject and strips out the navigational and advertisement sections.

Using a Stylesheet Designed for Printing

Cascading stylesheets, or CSS, are a means of specifying stylistic settings for an HTML document. For example, using CSS you can specify that the content within paragraph tags (<p>) be displayed in a bold Verdana font by using the following stylesheet declaration:

Listing 5: Using the style sheet declaration

<style type="text/css">
  p  { font-family:Verdana; font-weight:bold; }
</style>

With CSS 2.0, you can specify a printer-friendly stylesheet for a Web page along with a "normal" stylesheet. When a user visits the Web page through the browser, the normal stylesheet is used. However, when the user prints the Web page, the printer-friendly stylesheet's specifications are used instead. For example, imagine we had a Web page that had a left-hand side navigational bar.

For the printer-friendly version we would not want to display the left-hand navigational section. We will only display the content in the "main" section of the Web page. In order to accomplish this effect using a printing stylesheet, we would want to create a stylesheet for the printer-friendly version that declared a style class for the left-hand navigation elements with a display: none attribute. This would cause the left-hand navigation elements to simply not appear in the printed version. An example of this can be seen below:

Listing 6: Creating a stylesheet for the printer-friendly version

<HTML>
<HEAD>
<link rel="stylesheet" media="print" title="Printer-Friendly Style" 
         type="text/css"
<style type="text/css">
BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
TABLE
{
    FONT-SIZE: 10pt
}
</style>
</HEAD>
<BODY>
   <table width="100%" border="0">
      <tr><td width="200" class="navStuff" align="center">

The navigational stuff goes here and note it is inside a element with its class attribute set to navStuff. In the printer-friendly stylesheet, the navStuff class has display: none set.

Listing 7: Illustrates the navigational stuff

</td>
      <td width="*" valign="top">
           This content will appear in the printed version.
      </td></tr>
   </table>
</BODY>
</HTML>

Note that the printer-friendly stylesheet is imported via the following tag:

Listing 8: Import of the style sheet

<link rel="stylesheet" media="print" title="Printer-Friendly Style" type="text/css" href="URL to stylesheet">

Of utmost importance is that you include the media="print". The content of the printer-friendly stylesheet for this example is fairly simple. It specifies the default font settings for the body, that elements with the navStuff class should be hidden, and that hyperlinks should display the value of the href attribute after the actual link. The contents of the printer-friendly stylesheet used for this example follows:

Listing 9: Content of the style sheet

BODY
{
    FONT-SIZE: 10pt;
    COLOR: black;
    FONT-FAMILY: Arial;
    BACKGROUND-COLOR: white
}
.navStuff
{
    DISPLAY: none
}
a:after
{
	content:' [' attr(href) '] '
}

The a:after stylesheet attribute indicates that after <a> tags (the HTML tags used for creating hyperlinks), the content should be brackets with the value of the href attribute inside. This is useful for a printer-friendly view since when viewing a printer-friendly view the user cannot visit a hyperlink. By placing the actual URL after the hyperlink in the printer-friendly view, the person reading the printed version at least knows the URL the hyperlink leads to.

Sample Output:

Result of article

Figure 1: Result of article

Conclusion

We learned today how to create a printer-friendly document by utilizing CSS. Hope you had a good learning.



Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?

Did you like the post?

Help us to keep publishing good contents like this.

SUPPORT US

funded

remaining

[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually � in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits � in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login