Jens Oliver Meiert

Print Style Sheets: The Basics (for No Excuses)

Post from February 21, 2007 (↻ August 27, 2014), reflecting Jens the .

There are no excuses for not having at least a simple print style sheet. Period. And if you’re already on the web standards track, things are dead simple. (There’s just no need to force users to disable style sheets, open Print Previews, select pages they want to print, and finally print.)

Let’s go. One of the World’s most basic print style sheets is based on this simple rule:

@media screen, projection {
}

…assuming that you don’t mix structure and presentation, use only a single style sheet (big advantage, again), and don’t tie media types to the HTML style sheet reference. In this case, the result will be an unstyled page where user agent style sheets almost do the job.

The next step’s surely “real” print optimization. For example, you may want to make sure that everything’s black on white, and you probably need another font (since several system fonts don’t work that great on paper). Voilà:

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

}

(Derived from the meiert.com style sheet and based on my own CSS coding guidelines.)

That’s neat. You just add the above snippet to your (via @media) screen targeted style sheet, or, if you can’t avoid it, you just remove the @media print { and final } parts and use the remaining rules to create an extra print style sheet.

Note concerning additional print style sheets: I did not analyse it very carefully, but I suspect user agents to download print style sheets on document load, not only in case of printing (which even makes sense anyway). This means that even larger print style sheets might be located in the corresponding “main” style sheet without increasing load time. Quite the contrary: Using just a single style sheet saves one or more additional server requests, so this procedure will bring better performance. With small print styles (like the above), it should be clear that using only one style sheet is best.

But let’s finish our mini-excursus on print CSS: Users do not really benefit from navigation menus, footer sections, and stuff. So let’s remove them in the print version:

@media print {

  #nav,
  #about {
    display: none;
  }

}

(You probably need to adjust the above selectors to fit your needs.)

All this stuff combined will create one of the most elegant solutions for mainly your users’ “I can’t print this document and I hate you because you only had to exclude printing from your style sheet exercises” problem.

@media screen, projection {

  /* The regular stuff. */

}

@media print {

  * {
    background: #fff;
    color: #000;
  }

  html {
    font: 100%/1.5 georgia, serif;
  }

  #nav,
  #about {
    display: none;
  }

}

We all love subtle, encouraging posts, don’t we. (Hopefully, my favorite “I don’t care about print” bloggers, Mark Cuban and Guy Kawasaki, will feel encouraged, too.)

Comments (Closed)

  1. On February 22, 2007, 11:13 CET, Jens Grochtdreis said:

    Well, “dead simple” and print styles do only fit on the first sight. As long as the Mozilla-programmers don’t want to correct a big fault inh their program which they know of for at least five years, it can be very horrible to write a print stylesheet. All Mozillas fail when encountering a float.

    Speaking of failing: there is not one browser that interpretes all the good and nice specifications for print styles. So, writing a print styles can be a big headache except for simple layouts as from blogs as yours or mine.

  2. On February 24, 2007, 9:54 CET, Steve said:

    You may want to test this for accessibility with screen readers. In the past Jaws had difficulty with the media selector when screen and print were in the same file. It would apply all of the rules despite the media selector and render some of the content(i.e. nav as display none making it impossible for a Jaws user to access or even know it was there. placing the print styles in a seperate file and using the link tag to include it resolves the issue.

  3. On February 28, 2007, 23:17 CET, Jesse said:

    Thanks much for this! I haven’t explored this at all and your post gave me a great start.

  4. On March 1, 2007, 13:26 CET, Jens Oliver Meiert said:

    Jens, it definitely must not be difficult even for more complex sites. It may start with exactly what I present here.

    Steve, thanks for pointing that out—according to feedback by Gez Lemon, it seems that the mentioned problem has been fixed since JAWS 7.1. However, I also remember that using @media print rules may actually influence the appearance of documents in IE 5, since their implementation’s definitely quite buggy in this regard. Thankfully, this IE version’s almost dead.

  5. On April 14, 2007, 18:26 CEST, Peter said:

    What is Media:projection for? Opera is the only browser that supports this media type.

  6. On April 14, 2007, 20:48 CEST, Jens Oliver Meiert said:

    …since projection just makes sense, and due to Opera, right. :)

  7. On June 25, 2007, 9:34 CEST, Siegfried said:

    Absolutely necessary, indeed. Although i prefere to add the media descriptor to the HTML like:
    <link rel=”stylesheet” type=”text/css” media=”print” href=”style/Print.css”>

    This prevents the loading of unneeded Stylesheets at all. It just means that you have several stylesheets. I have a system with basically 3 stylesheets: One basic for all media, defining the major geometry, one for screen, adding colours and pictures, and one for printer, not adding colors but correcting the geometry (disabling the nav bar and extending the main container into the now free nav bar area).
    Avoiding “conditional comments” to include IE specific stylesheets may be a good idea, but there is no reason to avoid splitting your styles this way. Contrary it helps organizing the styles.

  8. On June 25, 2007, 10:31 CEST, Siegfried said:

    BTW: Indeed projection media makes sense. This would enable Powerpoint style presentations. The fact that neither IE nor Mozilla support this media type does not mean this is a bad idea. There is another badly supported media type, which coul dbe of great use: Aural.

  9. On June 25, 2007, 10:50 CEST, Jens Oliver Meiert said:

    I usually advise to reference just a single media independent style sheet to move maintenance further away from HTML; you can choose style sheet ordering and media types from a default.css or whatever, too, of course.

    Nice note on aural (though you probably refer to speech?) which brings up the reader media type, too […].

  10. On June 26, 2007, 16:35 CEST, Siegfried said:

    Yes, speech. Although i think this is called “Aural” in the w3c documents, but i’m not really sure.
    And btw h little hint, how to learn using css the right way (proper class names and the like): I learned that by applying several socalled “alternate” stylesheets to the page. During the learning phase alternate stylesheets which completely changed the pages geometry. Doing this enforces the use of meaningful semantic markup. If you don’t do so, none of these alternate stylesheets makes any sense, and you will notice that. One day this lead to some practical organisation of all those stylesheets. This is the reason why i prefere my styles organized into several files. I do not change geometry any more, that simply irritates the user, but for learning this was great.

  11. On August 21, 2007, 14:48 CEST, Jens Oliver Meiert said:

    This post is also available in German.

  12. On August 21, 2008, 18:43 CEST, Trupti Patil said:

    I would like to control the auto page numbering offered by printer through CSS for my ASP reports.

  13. On June 4, 2009, 18:06 CEST, Gordon said:

    An even easier way.

    Prepare a print.css. The first line should be
    @import “style.css”; (or whatever you have called it)
    Next add the following lines

    .NONO{display:none;}
    a {text-decoration:none;color:#000;}

    Add the class NONO to each div that you DON’T want printed e.g nav bars, menus etc.

    NOTE is is possible to assign more than one class at a time e.g. class = “nav NONO”

    Put a reference to the print.css in our pages and that’s it.

    When a page is previewed or printed the divs with class = NONO will not print, and all links will be in black with no underline.

  14. On November 12, 2009, 15:39 CET, maxodo said:

    Is it possible to use the @media print rule to print images defined by the css stylesheet? I need to print the background-images.

    Thanks in advance.

Read More

Have a look at the most popular posts, eventually including:

Or maybe say hi on Google+, Twitter, or LinkedIn?

Found a mistake? Reward! Email me, jens@meiert.com.

You are here: HomeArchive for 2007 → Print Style Sheets: The Basics (for No Excuses)

Last update: August 27, 2014.