TailorMade IT Solutions

Creating Printer Friendly Web Pages

It can be very frustrating when you go to print a web page and half the text has been cut off when the paper exits the printer. Some pages are not designed to be printed in which case I can understand this, but when they are supposed to be printed there is no excuse.

Here are a few simple solutions to consider:

Make sure your table size on your web page is no wider then 650 pixels, that way text won’t disappear off the edges when printed, this particular page is 780 pixels wide, which will probably cut off the text when printed.

Alternatively, if you don’t want to mess up your current web page, create a link to a printer friendly web page. All this means is you create an additional web page as in step 1, leaving out all the frills like unnecessary images, which is just good for printing. Then create a link on the main web page (as in this example) that says something like “Click here to Print”, which will take them to the printer friendly page.

When the user clicks the print button while viewing the web page, you can make the printer print a different page or document altogether. If you print this page using the standard print browser it will automatically print my printer friendly page.

Simply copy the below code into the <head> section of your web page.

Change printversion.doc to the file or web page intended to be used for printing. The file can be of virtually any format (pdf, Word, etc). When the user selects "Print", the printer will look for this file and print it instead of the current page.

For example: Import a Word document into the root of your web site.

Then copy the code below under the <head> section of code as mentioned above, changing the red text to the name of your document.

Alternatively, to make it print a another web page you prepared for printing, without the user being directed to it, just use this code:

...i.e. telling it where you have put the page you want to print.

Creating Page Breaks

This tip allows you to create page breaks within your web page, where you want them to occur.

Just copy this code into the <head> section of your code page

<STYLE>
tr.page {page-break-after: always}
</STYLE>

Then copy this code where you want your page breaks to occur:

<TR class=page></TR>

If you print preview this page, which would normally fit onto one page, you will notice that I have forced the page break to occur after the heading "Creating Page Breaks".

Last Updated 11 January 2008 ~ Copyright © 1997 - 2008 TailorMade IT Solutions
Hayward Lodge, The Green, Woolpit, Bury St. Edmunds, Suffolk, IP30 9RQ
Tel/Fax: +44 (0)1359 242146 ~ Email: Solutions@tailormadeit.co.uk