Pew Pew Laser Blog

Print Style Sheets.

Today, I'll talk about creating tweaking the way that your website will print using print style sheets.

Let's start with the standard disclaimer that electronic screens and paper are different, and that perfect screen to print matching is nigh impossible. The immutable inherent differences between screens and paper: dynamic and interactive abilities, color gamut, author and browser control conspire against perfect matching.

Now on to the good stuff. Here are a couple tips for developing a print style sheet.

• Consider how a visitor would use a printed version of your web page. It's probably best to hide elements will never be useful in the printed version - such as on-line-call sign-up forms or Flash movies. Better yet, use the print style-sheet to replace them with versions suitable for offline use - such a phone number to call for more information, or a textual transcript of the movie. (You should probably have these elements present on the page anyway for SEO.)
• If you have elements that need to appear only in the print version, simply include them in the HTML along with all the regular elements, and hide them in the screen style sheet.
• Any JavaScript (including libraries like jQuery) will override the screen style sheet. You can override these JavaScript style declarations by adding !important to the print style sheet's declaration.

Permalink