| | home | professional | articles | personal | services | contact | |
|
Brief: This note helps to create Printer Friendly Pages, without coding for one. This can be achieved by using stylesheet
There are two ways to create printer friendly pages
Create two style sheets say web.css and print.css. you can take make a copy and do few changes as mentioned later in the note. Add these stylesheets or links to them to your HTML page. The <head> tag in your HTML page would carry the following code.
<link rel="stylesheet" type="text/css" href="file
path/web.css" media="screen" >
<link rel="stylesheet" type="text/css" href="file
path/print.css" media="print" >
In the print.css file one can hide the elements (like navigation bars etc.), which are not to be used while printing. Also, if the page uses a light text on a dark background, it can be reversed in the printable version.
Hiding Elements:
Assume that one would like to hide navigation bar. Place the HTML code of the
navigation bar in a DIV tag with id "Navigation" (or any other name)
as shown below
<div id=navigation>
HTML code of the navigation bar
</div>
Now open both the stylesheet and add the following style tags respectively
web.css - #navigation { border:1px solid black; font-size:13pt; }
print.css #navigation { visibility: hidden; height:1px; width:1px; overflow:hidden;
}
To view an example click here.
You could have an alternate document for printing. Sadly, these only work for
Internet Explorer (perhaps Netscape 6.x supports these features). Add a link
as shown below
<link rel="alternate" media="print" href="printdocument.txt">
Place this tag in the head of a document will use the printdocument.txt file
for all print requests.
<link rel="stylesheet" type="text/css" href="style.css"
media="print">
This method allows you to employ a special style sheet for printed versions
of a page.
Always make sure:
While creating the printer version, place the content in a table with 100 %
width. That ensures, whatever size of paper a user wants to print, no clipping
would occur.
If necessary, then a safe table width should be 524 px, but in most cases 600
px would work for a A4 print.
Never, specify the font size in pixels for Printable versions, instead use points.
Times New Roman and other serif fonts would work well and you don't have to
restrict your selves to Verdana and Arial.
|
| [ © Anshuman Singh 2002 | Last Updated- Sunday, 27 April, 2003 18:18 ] |