Guideline
Most of the problems of incorrectly printed Web pages are associated with the use of HTML tables. Therefore, it is recommended to limit the width in these tables to 600 pixels, which is the maximum area needed to print safely on an A4 page (portrait orientation).
If the tables in a Web page need to have a fixed width exceeding 600 pixels, alternative style sheets (CSS) could be used, one for the screen and one for printing purposes.
In the following example, the banner and navigation bar of are prepared using a table which has a width of 700 pixels when viewed on the screen and width of 600 pixels when printed.
The HTML page has the following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Print-safe webpage</title>
<meta content="text/html;CHARSET=iso-8859-1" http-equiv="Content-Type">
<LINK xhref="homepage.css" type="text/css" rel="stylesheet">
<LINK xhref="print.css" type="text/css" rel="stylesheet" media="print">
</head>
<body bgColor="#ffffff">
<table cellpadding="0" cellspacing="0" border="0" width="700" class="main" align="center">
<tr>
<td rowspan="3" width="1%"><img xsrc="img2/Faologo.gif" border="0" alt="faologo"></td>
<td class="faoname">FOOD AND AGRICULTURE ORGANIZATION OF THE UNITED NATIONS</td>
</tr>
<tr>
<td class="faoslogan" valign="top">helping to build a world without hunger</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
The file print.css is used for printing as per the HTML instruction:
<LINK xhref="print.css" type="text/css" rel="stylesheet" media="print">
It has the following code:
@media print {
table.main { width:600px;}
}
Remember... Print-safe Tips!- The use of a CSS for print is also useful to resize images. The CSS can be adapted to Web pages that contain tables with different sizes. In this case, more than one instruction needs to be included in the Web page; and
- Be sure to include the instruction class="main" in your Web page.
|
Send a comment