Howto: Print Pages with Print Styles

I have previously written about the need for printer friendly pages on websites that carry content in the form of articles. While the printer friendly pages serve those interested in data only, it does not do any good to the designer who would have spent his creative bit on the looks and feel of the website. Also, it might not be the best if a user likes to print with the banner, styles and the fonts used on the website.

Suppose a user gets on a website and directly hits print; depending on the size of the website, the content along with the styles get printed. If the website is too wide or if the printer drivers are unable to recognise some of the functions used, the output will definitely not be as desired. It either spreads out onto multiple pages with abrupt divisions in the middle of a page.

I found a solution on Tim Almond’s website which helped me print a few pages in its original form.

One solution is to go into the pages, remove the reference to the print style sheets and go again.

However, there is a less intrusive alternative (it requires Firefox to install).

1. Install Chris Pederick’s Web Developer Add-On. Go to the web developer plug-in download site and choose Install Now. Once installed, you’ll need to restart Firefox. You will now have a new toolbar.
2. Choose the CSS button on the new toolbar, the Disable Styles menu and Print Styles submenu.

About the author:

Abhinav has been blogging about printing and related technologies on CreativeCloud for several years. He is also a project manager for a large technology company.

Share your thoughts, leave a comment!

(get your own gravatar)