• ARTICLES
SEARCH

How-To Geek

Geek Rants: Why Do So Many Web Sites Fail to Use Print Stylesheets?

image

It never ceases to amaze me that people have to look for a link or a button that says “Print” on a web page, especially considering there’s a miracle technology that makes that step unnecessary. Sadly almost nobody uses it, even though it’s… 10 years old.

Not only is it silly to require an extra step for printing, but using print stylesheets would save some ink for anybody that doesn’t use the printable link. And of course, there’s loads of people that use print-to-PDF to save articles for later without wasting paper.

What Are Print Stylesheets?

Most web sites implement their print function by taking you over to another page, which is formatted differently for printers – but this really isn’t necessary. Every browser implements a simple CSS technology known as Print Stylesheets, which is nothing more than a file that specifies elements to hide when your browser prints the page.

For those that are unfamiliar, CSS means Cascading Style Sheets, and it’s how your browser knows how to format the HTML source code for a web page into what you actually see on the screen. Everything from fonts, colors, borders, and even background images can be specified in the style sheet.

Adding a print stylesheet is as simple as plugging this one single line into your page HTML—the media=print part of the code tells the browser to only use this style sheet when printing.

<link rel=”stylesheet” href=”print.css” type=”text/css” media=”print” >

This file generally looks something like this:

#sidebar, #footer, #navigation, #sharinglinks, #topad, #comments { display:none }

Yes, it’s really as simple as that. So how does it work? Here’s an example of a normal web page on the left, with all of the navigation, logo, and ads clearly visible with the ID associated – and on the right, the same page with the print stylesheet applied, hiding all of those elements.

image

Obviously you’d prefer to print one of these over the other, right?

Examples of Print Stylesheet Failure

Unfortunately, there are just loads of huge web sites that haven’t bothered to implement this at all. Take a look at what happens when you try to print from the New York Times:

image

Some sites, like the Gawker network of sites, are even worse. Not only do they not have a printable view, when you do try and print, it resembles ink soup. As far as we can tell, there’s no way to print from a Gawker site without using a separate service like Readability, or manually highlighting the content on the page, which is nearly impossible on their new design.

image

It’s sad, really. Loads of the largest sites just completely fail to bother implementing this feature.

Thankfully, Some Sites Do Use Them

Here’s an example of a properly formatted printable view – without having to bother finding some print link. The BBC News site neatly formats the articles for print, complete with a custom header. They do include comments in the print view, but it’s still a job well done.

image

There’s quite a few other sites that do the same, like ArsTechnica and… our site, but it would be silly to show screenshots of all of them. In our research, the sites that properly implemented them are few and far between.


So to wrap up… please take the 5 minutes required to implement a print stylesheet for your site!

Lowell Heddings, better known online as the How-To Geek, spends all his free time bringing you fresh geekery on a daily basis. You can follow him on if you'd like.

  • Published 04/27/11

Comments (38)

  1. zs

    well said!!

  2. saj14aJ

    While I entirely agree with this rant, to properly implement print style sheets, tuning the content for the printed page, and excluding inappropriate content from being printed is often far, far more than 5 minutes to set a few elements to display:none.

    It can take many hours to tune a print style sheet, especially if the underlying structure of the page isn’t designed to facilitate this, and due to differing level of browser support (IE 6 especially).

  3. Richard Walker

    Rant away, but some of us who got started along with the creation of html simply have never heard of this, 10 years old or not.

  4. SmashD

    Who wants to print web pages anyway!? Totally unnecessary…

  5. StevenTorrey

    Many computer articles have a ‘print-friendly’ version that deletes extraneous information. The ‘cut and paste’ function allows the reader to extract only the relevant info for pasting onto standard 8 x 11 sheet of paper, re-size the print, the photos, etc so as to make the article suitable for printing. But it is tedious and time consuming and takes some practice but it does work. Course, the biggest defect with doing it that way is copyright protection; the person who ‘cut and paste’ has obligation to assert where that article came from for proper ascription and prevent unintentional plagiarism. Also, the reader must include the www address for future retrieval.

  6. beachbumfun

    i am glad you qualified that as a Rant; i have done hundreds of sites and don’t use print-css on many because they have no interest in how the public perceives the printing process of their sites. Just another take….

  7. TsarNikky

    It is just laziness (or possibly, arrogance?) on the part of the company putting up the web page. There are many reasons whereby someone seeing a web page will want to print its information. Think of the printed page as a reference–not only to the information but also to the URL of the page. So much on the Internet is in obscure locations, that trying to remember just how one got to a particular page is well nigh impossible. So…when one finds a page to “keep,” one wants to print it. Doing a series of copy and paste of screen shots into a word processor is totally unacceptable.

  8. John J

    Complete agreement with the article with the caveat for content providers who make it difficult and non portable because they have a business interest to do so (New York Times, Wall Street Journal, …) It may be an illusion of security for them but I understand why they do it.

    That said…I can’t say enough about the frustration I have had with sites where I needed to print off an order acknowledgment or directions and banged my head on the wall screen shotting, snipping, and scraping to get the info I needed for an electronic record.

    Thanks Geek

  9. Rollout

    Agreed, most websites can do a better job of policing their page print functionality. In most cases, it is a good sized challenge to do this at best. That is why it is the last thing done on a site, or is not done at all.

    Even a print stylesheet is included, there is no guarantee that the page will print correctly. The print engines in FF and IE are years behind the browser engines, and are crudely implemented. The print function will truncate sentences, break paragraphs oddly, distort spacing and font sizing or lose content alltogether, etc. Not to mention that if the user happens to have the scaling set to anything other than “shrink to fit” the page will not print as expected. There is alot of room for improvement in the print function in browsers.

    One more thing to remember, the W3C recommends to use em’s or %’s in your webpage CSS for font sizing for screen display, and to use points, picas or mm in your print stylesheet for font size for print output.

  10. Jonasaky

    well said! ….put hands to work!

  11. jayboe

    Hmmm, can that bit of html code be implemented into your browser (firefox, i.e.) to make it view websites in that manner for default?

  12. Spock101

    @ SmashD – I for one print pages from websites. I do it for a variety of reasons; 1) I want to send specific information to someone else, not just the site address & hope they find the information; 2) I want to keep the relevant information for my own use. I print to PDF or MS OneNote so that I have it on hand when I need it again, & don’t have to try and remember the site where the info was. Think before you open you mouth – just because you don’t print web pages doesn’t mean that none of the millions of other users don’t either. Soem of us appreciate being taken into consideration, even if we are in the minority!!

  13. Rick

    does anyone use “Print What You Like”? just copy the url to the page and do a quick edit. Not perfect but for the amount of time that I want to print a web page which isn’t very often it works great

  14. fermatsenigma

    Yeah, save a web page, kill a tree….lol.

  15. W.D. Mahan

    Well this is very informative Geek Teacher…however when I pressed my browsers print command the resulting print out was of the type you were rallying against….What happened to the stye sheet printout I expected?….You may now step down from your soapbox

  16. Alex Thorp

    What’s a printer?
    oh right… people still use those. Ahem.
    I actually didn’t know this existed. Now that I do, I can add it to my site.

  17. Ms Hanson

    Perhaps not as streamlined, but I use http://www.printwhatyoulike.com as my go-to solution, whether I simply save, plaigerize – oops, borrow – for my newsletter, or actually print on paper. Works. Free.

  18. Samuel Coxson

    I’m studying as a web designer and didn’t know about this. I think its just a lack of awareness.

  19. Christian K.

    Found some browser version support info for this print feature:

    http://www.codestyle.org/css/media/print-BrowserSummary.shtml

  20. The Geek

    @WD

    Exactly what browser are you using? Because I’ve tested this site and it should work just fine.

  21. Matt

    My initial thought is that the developer was way to exhausted and burnt out on tuning the CSS to work for IE let alone deal with printers!

  22. Johan

    @WD, @The GeeK

    I think the issue lies in your page setup options, when I ‘Print Previewed’ in FF 4.0 I too saw backgrounds and images due to the default ‘Page Setup’ under the print preview, once i went into ‘Page Setup options’ and unchecked ‘Print Background’ under the ‘Format & Options’ tab all was good.

  23. pbug

    It’s not just printing that works poorly on so many sites. It is also display on small screens. There’s so much garbage on the screen that when displayed on a smart phone the pages are not readable. The frustrating part is that mobile users need pretty much the same thing as people doing printers; the bulk of the screen must be what you are actually trying to read.

  24. Eric

    Honestly, I’d say because it has little return. Aside from places where you need to print things like maps or tickets/coupons, how many websites have ‘user printing’ as a priority? I’ll agree it’s annoying, but I doubt there’s a big enough concern for it, and it’s not something that would keep someone from a website. I’ve never heard anyone say they’d stop using a website because it prints poorly; at least a site that again, doesn’t have a main focus around printing.

  25. The Geek

    @Johan

    That makes sense! I don’t think that’s a default option for most browsers though… at least not in my testing. It must have been turned on by something at some point.

  26. miki

    Simply, some programmers don’t know print.css…or handheld.css (form mobile device) so the don’t use it.
    Print css is the better solution to print, someone use a auto generated pdf…insane!

  27. Trevor Yannayon

    Even though I agree not everyone thinks about usability or desired functionality from the viewpoint of the visitors. One solution I use and recommended is a free site http://WWW.printfriendly.com. They even provide a free WordPress plugin to make it easier to implement an easy solution on your own site.

    They also have an option that allows you tl create a clean PDF for viewing, sharing or printing later.

  28. Marc

    Although sites may not have some sort of direct incentive to provide print CSS, even when I save pages in PDF for later review or documentation, I don’t want to save files with a bunch of graphic elements besides those pertaining to the content. And if sites are worried about ad revenue, don’t worry, we are already blocking ads because they are stupid, irrelevant, annoying, auto-play, etc. But they could always add some adds to the print CSS, no?

    On a side note, if there is an ad/revenue reason for the bad form. I wish AdBlock would work with quality advertisers and companies to provide an ability to allow quality ads. I am not opposed to ads, I just don’t need extension of any kind, nor does a monkey need to be hit with a banana to get my refinance rate, and I really really really don’t need a degree in “This Is What It Must Have Felt Like Being A Share Cropper” from Scam U. I would enjoy quality ads (not stalk-y ads that use personal information to target me, ass-hats!); but until I realize I am not being stalked or scammed, I will continue to live in ad free bliss. Except for sites like How To Geek that deserve my ad views.

  29. Andrew

    I wanted to print out this article and the comments. Funny thing, the article printed fine, but I saw no way to print the comments. Argh!!

  30. jazz2600

    What drives me insane are those special print pages that open in a separate window with no controls. It is frustrating that I cannot use print preview to ensure that I am not printing unnecessary pages, because almost EVERY page I need to print has an odd blank second page.

  31. Xps

    I considered creating a print stylesheet and originally decided against it. After reading through the dialogue here, I think I’ll reconsider my decision. On the occasion that I print a web page, I usually “print” it as a PDF, so the extra areas of the site didn’t bother me. Two things I want to point out about your HTML code: 1.) You didn’t close the link element 2.) Curly quotes have a way of causing problems. Straight quotes preferred.

  32. Woody

    I too was also wondering how to print the comments from web pages, I used to be able to do it but have lost the ability recently, not sure if it was a browser change or what. I have found the article itself usually has the broad information but the community will fill in gaps and offer tips/tricks for different things the author did not think about which is why I like to save off the article and comments in either One Note or a variant to reference back too.

    Any ideas?

  33. Eric

    My site already has one! Though I might add that installing wordpress on my WWW subdomain made it a lot easier.

  34. angelo

    Just use the Readability extension for Google chrome

  35. David

    An observation on the Gawker sites that have no print formatting. There is a workaround: all pages seem to have mobile-friendly equivalents and you can substitute the “www” prefix (or “uk” etc) with “m” and get a printable page. This seems to work for their front pages and articles, such as
    http://www.lifehacker.com >>> m.lifehacker.com
    and
    http://www.lifehacker.com/5798501/planetary-for-ipad >>> m.lifehacker.com/5798501/planetary-for-ipad

    OK, you shouldn’t have to fiddle around with workarounds, but it’s better than nothing!

  36. PBWriter

    There’s also the “Read it Later” extension for Firefox that saves a neat and clean offline copy of favorite sites in addition to the full interface. You install Read it Later, click the little arrow that will appear in the address bar, and there’s a toolbar button and keyboard shortcut that allows you to read either the full content page or the text-only version (which allows you to use a very nice-looking Georgia serif font instead of the usual Arial or Times).

    I print PDFs to save usually when my printer is low on ink ;) Contrary to popular belief, the “paperless office” is still a misnomer even with these Kindles and Nooks appearing in every, well, “nook” and cranny (I’m more like an anti-Nook “granny” even in my mid-20s, LOL). No matter what, system failures do obviously happen, and when data is lost, people are still going to want a hard copy in hand regardless of the hard drive copy online :)

    Once again, LOL = Luddite On Laptop ;)

  37. PBWriter

    By the way, “Read it Later” is here:

    https://addons.mozilla.org/en-US/firefox/addon/read-it-later/

    I’m not affiliated with the maker(s) in any way, but I do think it does more than just saving one’s bookmark list from the clutter of “temporary” favorites :)

  38. HeavyG

    The problem I have with many if not most sites that use a print style sheet is that they don’t include the comments section in the printed/pdf output. This page for instance does not include the comments when I print to pdf.

    Oftentimes the comments are what I am really looking to capture.

Get Free Articles in Your Inbox!

Join 134,000 newsletter readers

Email:

Go check your email!