 |
||||||||||
|
||||||||||
|
||||||||||
Web Development »
HTML / CSS »
CSS
Intermediate
Printing with StyleBy Per SMake your web pages printer-friendly. |
Javascript, HTMLWin2K, WinXP, Win2003, Windows, Dev Posted: 16 Sep 2003 Updated: 23 Sep 2003 Views: 162,546 Bookmarked: 80 times |
||
|
|
|||
- Lead Graphical User Interface Developer at ECTPay in United States
- Web UI / Usability Engineer at Central Desktop in United States
- ASP.NET C# VB.NET SQL Developer at High Power Consulting, Inc. in United States
- View Latest Jobs...
|
Advanced Search Sitemap |
|
|
|
||||||||||||||||
Introduction
There're a lot of techniques used on the net to create nice looking prints from web pages. Some take a copy of the pages and remove unwanted elements manually, some do it by opening a new print-friendly page using a server side script (ASP, PHP, Perl, ...). I prefer doing it with style :-)
Style
Doing it with style is simple and elegant; you create a separate style sheet with elements suited for print:
- Set the background to white (
background:#ffffff;) - Underline links (
text-decoration:underline), and maybe color them blue for users with a color printer - Hide unwanted parts using
display:none;
You attach the style sheet using:
<head>
<link rel="stylesheet" type="text/css" href="..." media="print" />
</head>
media="print" (IE 4+, Netscape 6+ and Opera 3.62+) tells the browser to use this only when you print the page.
This is how I attach my print.css.
<link rel="stylesheet" type="text/css"
href="css/print.css" media="print" />
You can test it by printing one of my pages, if you print my Links page you'll also see how I append external links (IE 6+ only):
body {
color : #000000;
background : #ffffff;
font-family : verdana,arial,sans-serif;
font-size : 12pt;
}
h2 {
font-size : 14pt;
}
a {
text-decoration : underline;
color : #0000ff;
}
#logo,#head,#menu,#tail,#printicon, {
display : none;
}
#appendedlinks {
page-break-before: always
}
Append external links
A nice feature is to append all external links in the webpage, to the print document. This is implemented on my pages using the following JavaScript:
//
// IE only: attach eventhandlers.
// They trigger when a user prints a web page;
// From File->Print, File->Print Preview or
// by executing a window.print() command
//
window.onbeforeprint=beforePrint
window.onafterprint=afterPrint
function beforePrint() {
appendlinks(content);
}
function afterPrint() {
removelinks(appendedlinks);
}
//
// Generic print function, called from the web page
//
function printContent() {
if (window.print) {
window.print();
} else {
alert("your browser doesn't support this function")
}
}
//
// When appending links to the document, do not
// append links pointing to the following domains / sites
//
var excludedomains=["soderlind.no", "soderlind.org","localhost"]
var excludedomains=excludedomains.join("|")
rexcludedomains=new RegExp(excludedomains, "i")
//
// appendlinks(id)
// id = id of the part of the web page you want to extract links from
// ex: document.body
//
function appendlinks(id){
var strD = "<p/>";
var num = 0;
if (document.getElementById){
var links=id.getElementsByTagName("A")
var total=links.length
strD += "<dl id=\"appendedlinks\" border=0>"
strD += "<dt><h2>Links extracted from the document:</h2></dt>"
for (i=0;i<total;i++){
if (links[i].hostname.search(rexcludedomains)==-1
&& links[i].href.indexOf("http:")!=-1) {
strD += '<dt>'+links[i].innerText+'</dt>'
strD += '<dd>'+links[i]+'</dd>'
num++;
}
}
strD += "</dl>"
if (id.insertAdjacentHTML && num>0)
id.insertAdjacentHTML("beforeEnd",strD);
}
}
//
// removelinks(id)
// After the print job is done, remove the appended links from the document
// id = appendedlinks
//
function removelinks(id) {
if (document.getElementById){
id.removeNode(true);
}
}
Have fun coding (and printing).
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
|
PermaLink |
Privacy |
Terms
of Use
Last Updated: 23 Sep 2003 Editor: Smitha Vijayan |
Copyright 2003 by Per S Everything else Copyright © CodeProject, 1999-2008 Web08 | Advertise on the Code Project |