Printing stylesheets

I recently read Marko Dugonjić’s 10 Minutes to Printer Friendly Page (via CSS Vault), a quick tutorial on how to load a print CSS with server side scripting. The technique involves reloading the same page, but with an added variable to the query string. When that variable exists, a separate print stylesheet is loaded instead of the screen stylesheet.

What I usually do on client sites is very similar, but not quite the same. I also use server side scripting to check for a variable on the query string, but I don’t load a print stylesheet instead of the normal CSS file, which Marko does.

The way I do it, I always load the normal screen CSS. When the query string contains the printer-friendly variable, I also load an overriding print CSS. In the print CSS, I define rules that override those in the normal CSS that aren’t suitable for the print version. This includes setting display:none for stuff that should be hidden, changing font-size, font-family, margin, and anything else that needs to be changed to make just the content appear in a format suitable for printing.

There is no huge difference in doing it this way as far as I can tell, so it’s mostly a matter of preference which way you choose to define and load your print stylesheets.

Posted on September 23, 2004 in CSS, Quicklinks


  1. I see it as step back. I use instantly available stylesheet linked via media=”print” myself and that works pretty well. Cameron raises valid points, but those are big assumptions. Once again “possibility vs. probability” thing: maybe there is one visitor in a thousand which wants to print some ad, but I am not going to penalise other 999 and my servers with double loading to satisfy that need.

  2. I don’t understand. Why use script and c

  3. Sorry, I tried to send the comment from my Treo 600 PDA and it didn’t go for some reason.

    I don’t understand. Why use script and reload the page with an additional stylesheet when you can just load a print style sheet on the first load. If you setup your “normal” style sheet for meadia=”screen” then your print style sheet can be setup to hide the items that don’t make sense on a printed page and a few changes to the font and margins. If your markup is semantic then it should be a breeze.

  4. September 24, 2004 by Roger Johansson (Author comment)

    It’s my experience that many people want to know what they are printing, and get confused when what comes out of the printer is not the same as they can see on their screen. And more people than you think actually want to print the whole page. By making a printer-friendly version available, visitors can make a choice.

    The post by Cameron Adams that RImantas is referring to is CSS, printing and user expectation .

  5. I agree that people want to know what they are printing and generally don’t use “print preview” option from browser menu even if they know it exists. But how do you let them know about “printer-friendly version”? I don’t see any “print me” or similar link on this site…. If you use this technique only on client sites, why not on your blog??

  6. September 24, 2004 by Roger Johansson (Author comment)

    MiMaS: Adding a printer firendly version to this site is on my list of things to do :)

  7. Talking about printer friendly pages … There’s something really annoying about a lot of so called “printer friendly” pages: they usually do not have printer friendly images, but have the same images used on the “screen page”. As a result you have images that have odd colors compared with the paper background color. And sometimes (?!) the images are just too big. They splash way too much ink on the paper and cripple the layout.

  8. September 24, 2004 by Roger Johansson (Author comment)

    I went ahead and added a printing stylesheet to all individual entry pages of this site. And I did it the way Marko does in the article I linked to in this post: by loading only the print style sheet instead of both the screen and the print stylesheet.

    The link to the print version is at the end of the main entry body, right next to the date and number of comments.

  9. Nice to see you have print version, Roger :)

    I’ll try for the last time to convince you to drop this server based approach.

    Why? It just does not cut.

    Let’s see - for the print version you have absolutely the same html code. The whole point requesting the server is - to get another stylesheet.

    Stylesheet hides everything except main entry and comments - but relevant html code still travels back from the server, only it is hidden. And every time I want to print particular page I have to wait till it comes down to me. That’s the cost of having query string in request - no cacheing.

    To sum it up - this approach gives me an ability to see how page will look like (not exactly, text will be wrapped in different way). This nice feature costs me (and you) double the traffic. Since October I will pay for the traffic, so basically I can browse twice less for the same money…

    Now, take a look at another approach - to have print stylesheet linked at once - <link rel=”stylesheet” href=”print.css” type=”text/css” media=”print”> It costs about the same amount in markup as does link to print version. But - upon the first request print.css gets downloaded and cached. That’s it!

    Now I can print any page instantly. Even better - if I read something on site and that “full” page is cached by browser on disk I can have it nicely printed without any request to web server at all - html is cached, stylesheet is cached. I can print it five days later, and being off-line. Ain’t that nice?

    Yes, there is a drawback - if I do not use print preview I won’t know how will it look like. But, really, do you find that pages printed down look much like they look on screen? I mean pages without print stylesheet, o “printer friendly” version. Usually they look crap, and, sadly, users got used to that.

    Now there is the trick - if one wants something printed, he/she just prints it.

    If one is lucky, he will have it printed nicely, if not - he gets some crap. That does not matter - he wanted it printed for some reason.

    What I am trying to say - if someone needs to get some your content on paper he/she will just go ahead and do File-print (or Ctrl-P) no-matter, have you got print stylesheet or not.

    I had a pleasure to watch user performing this - pleasure was to see reaction on resulting page - “Wow, I wish every site did just this”.

    Having print stylesheet linked does not require visitor to hunt down for the printer friendly version (“don’t make me think” - remember? ;) - just print, and you will have nice output.

    And if you still see the reason for the separate request to the server to get print version of the page, I’d suggest to go all the way and serve back really printer friendly version - I mean based on separate template, without all the things wich will be not printed.

    Otherwise I really really see no point of all this server based feedling and I don’t buy that showing how page will look like before printing is worth it.

    Wow, I guess I could make my own blog entry on this…

  10. September 25, 2004 by Roger Johansson (Author comment)

    Rimantas: Wow, that’s a long comment! ;-)

    I think we’ll have to agree to disagree on this one. Yes, always linking a print stylesheet reduces bandwidth usage. The problem, as I see it, is that it leaves the user with no choice. The only version they can print is the one based on the print stylesheet. Neither method is perfect, and I prefer the one I implemented here.

    Another way of providing a print stylesheet would be to use a JavaScript based stylesheet switcher instead of reloading the page. I haven’t tried it, but it could work pretty well.

  11. I think the best solution is to provide both methods: separate stylesheet for media=”print” and javascript based print preview link directly on page (as I said before - people don’t use ‘print preview’ from browsers menu). Refer to ALA for nice and simple styleswitcher ;-)

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.