Geeks With Blogs

Tim Huffam Dotting the I and crossing the T of I.T.

Many web pages are not designed with any consideration for printing - this is one of those annoying things that one comes across more often than not.

Here are a couple of simple ways to make sure your pages are printed in a formatted way:

  1. Use a specific print style sheet. 

    This is the most common approach used on the web.  The idea being you create another stylesheet that is specifically for formatting your web page(s) for printer output. 

    There are many examples on the web of how to do CSS so I won't go into that.  However what you may need to know, is how to specify an printer specific stylesheet within your page.

    A normal stylesheet is added like this:
    <link href="default.css" type="text/css" rel="stylesheet">

    where as a print specific stylesheet is added like this:
    <link href="print.css" type="text/css" rel="stylesheet" media="print">

    By adding this to your web page, whenever the user click on the Print button the page will be formated using the print stylesheet.

  2. Use an alternative document.

    This is a less known method, which can be very effective.  Basically it tells your browser to use an alternative document whenever the user clicks on Print.  This alternative document can be any web resource eg another web page or something like a word document, spreadsheet or pdf document.  What's good about this that things like word or pdf documents are very quick and easy to create and format - so you know what it's going to look like printed right away (I find it way easier to create and format a word doc than fiddling with stylesheets).

    This is how to specify the alternate print document:

    <link href="worddoc.doc" type="application/msword" rel="alternate" media="print">

    Note that you should specify the correct content type.

HTH

Tim

 

 

Posted on Tuesday, October 31, 2006 12:30 PM ASP.NET , PHP (incl PhpMyAdmin) , Web Development, JavaScript & CSS | Back to top


Comments on this post: Printing nicely from the web: Printing web pages or alternate documents

# re: Printing nicely from the web: Printing web pages or alternate documents
Requesting Gravatar...
I have been looking around the web for javascript codes to print an alternate document.
I have found 4 sites which recommend the same code that DynamicDrive suggests, and you know what, none of them works.

I am getting the impression that some javascript writers do not test these scripts, they just write them.
Left by George Livingstone on Nov 15, 2008 3:03 PM

# re: Printing nicely from the web: Printing web pages or alternate documents
Requesting Gravatar...
You have a great article.I find it very useful.I guess there are many people who have different problems like this and can't find the best solution.
Left by Online printing company on Jun 20, 2011 11:31 AM

# re: Printing nicely from the web: Printing web pages or alternate documents
Requesting Gravatar...
Hey, now this is a cool tip. I love finding these little things. Learning how to build good site and pages, and this just furthers my education! Thanks for helping out. WB
Left by Ambit Energy on Feb 03, 2012 11:44 AM

Your comment:
 (will show your gravatar)


Copyright © Tim Huffam | Powered by: GeeksWithBlogs.net