TMITS - Printing web page alternatives

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. 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.

Another option is 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 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 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, you will notice that I have forced the page break to occur after the heading "Creating Page Breaks".

back to Tips