Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
8. Using the Same Page for Web or Print
Most Web sites that present lots of text include a link to a "printer-friendly" version of the article, which is often a completely separate file from the "non-friendly" version. However, using CSS, you can make a single HTML screen that’s printer-friendly.
Here are a few simple things you can do to improve the appearance of your Web page when it gets printed:
- Define your media. CSS allows you to define different style sheets to be used depending on the where the page is being output—usually onscreen or on paper. Create a style sheet for the screen and one for paper.
- Use page breaks to keep headers with their text. Although the page-break attribute is not widely supported at this time, it may be a universal standard before long.
- Use display=none to hide navigation when printing. There is not much point in including your menu on a piece of paper.
- Avoid using background colors or background graphics with light-colored text. Although they can add flavor in the window, background colors and graphics turn into noise when printed.
- Avoid using transparent colors in graphics. Especially avoid them if the graphic is on a graphic or a background color other than white. The transparent area of a GIF image usually prints as white, regardless of the color behind it in the window. Again, though, you might want to hide these graphics and show a different one if you have set up separate CSS for screen and print.
- Avoid using text in graphics. The irony of printing stuff off the Web is that text in graphics, which looks smooth onscreen, looks blocky when printed. Regular HTML text, however, may look blocky onscreen, but prints smoothly on any decent printer. Try to stick with HTML text as much as possible.
The page looks like this when presented in a Web browser.
)
The exact same page looks like this when printed.
)
EXAMPLE:
http://www.webbedenvironments.com/dhtml/code/02_CSSBasics/CSSforPrinting/index.html