Best Practices for CSS Print (from Web Design in a Nutshell (3rd Edition)
Talk to your client about his/her expectations for print versions of the screen before creating styling the page.
Background image do not print by default, which means any text replaced by image replacement techniques may be lost. You may need to change the style for printing so the text prints out.
If your web page uses floats for long images, make sure that the print style sheet resets floats to none. There is a bug in Gecko-based browsers that causes long floats to get clipped after the second or third page. Setting float:none for long elements fixes this problem.
You may want to change the styling for your links so they blend in with the other text, since people can't link from a printed document. There is a technique to have the link from the href attribute print after the link text as below:
Be careful using this method. If there are a lot of links on the page it could make it hard to read. You can use a JavaScript technique found in the article, Improving Link Display for Print, on A List Apart (http://www.alistapart.com/articles/improvingprint/).
W3C CSS @import Rule
http://www.w3.org/TR/CSS21/cascade.html#at-importW3C Schools Page Break with CSS
http://www.w3schools.com/CSS/pr_print_pageba.aspPrint Stylesheets Discussion
http://css-discuss.incutio.com/?page=PrintStylesheetsSpecifying Page Breaks with CSS
http://www.javascriptkit.com/dhtmltutors/pagebreak.shtmlCSS and Printing (article)
http://www.htmlgoodies.com/beyond/css/article.php/3470341CSS Issues with @import (blog article 2009)
http://www.mdsnig.com/News/archives/174Best Practices for CSS Print (from Web Design in a Nutshell (3rd Edition)
Talk to your client about his/her expectations for print versions of the screen before creating styling the page.
Background image do not print by default, which means any text replaced by image replacement techniques may be lost. You may need to change the style for printing so the text prints out.
If your web page uses floats for long images, make sure that the print style sheet resets floats to none. There is a bug in Gecko-based browsers that causes long floats to get clipped after the second or third page. Setting float:none for long elements fixes this problem.
You may want to change the styling for your links so they blend in with the other text, since people can't link from a printed document. There is a technique to have the link from the href attribute print after the link text as below:
#mainContent a:link:after, #mainContent a:visited:after {
content: " (" attr(href) ")";
}
Be careful using this method. If there are a lot of links on the page it could make it hard to read. You can use a JavaScript technique found in the article, Improving Link Display for Print, on A List Apart (http://www.alistapart.com/articles/improvingprint/).