CSS Design: Going to Print

by Eric Meyer

109 Reader Comments

Back to the Article
  1. Thanks for your great articles—there’s so much fantastic stuff to read, I’m having a hard time getting through them (especially when IE keeps crashing, argh).

    Whenever I read stuff on style sheets, there’s the “make sure it works in old browsers that don’t support CSS” line. My question is, how do you make sure of this? I read that you can’t install older versions of IE because they stuff up the new ones. How do you get a hold of older browsers to check your sites for accessibility?

    Thanks a lot if anyone can help!

    Copy & paste the code below to embed this comment.
  2. Excellent article. As always, EMeyer blosters the confidence of designers using CSS. However, I have encountered something of a bug in IE6/Win. Possibily some one out there can help…

    Like the “Float Flub” mentioned for mozilla, this is appearing in IE/6 on long pages, but without the float anywhere to be found. I simply get the first page, followed by blank pages to the end of the print job.

    The base CSS was taken from bluerobot’s layout reservoir for three column layouts. Anyone experiencing similar issues in IE6/Win?

    Thanks,
    Tim

    Copy & paste the code below to embed this comment.
  3. Migs,

    Assuming that either a) your print stylesheet appears after the other, or b) your other stylesheet is not a media all then you should just be able to use body (or whatever) {
    background: blah blah;
    }

    Copy & paste the code below to embed this comment.
  4. Cheers Lachlan,

    I’m gonna give your suggestion a try. Thanks for your reply much appreciated.

    Migs

    Copy & paste the code below to embed this comment.
  5. Great article…I love using CSS…but I have run into a problemo.
    I would like to use CSS for printer friendly pages, but I have text boxes that contain information my users would like to print. Is there any way using CSS to capture the content in the text boxes and print them?

    I think I am resigned to using a combination of JavaScript (w/printer friendly button) and CSS.

    Copy & paste the code below to embed this comment.
  6. Great article, but i want know if is possible handle the header/footer using css

    Copy & paste the code below to embed this comment.
  7. OK. I know all the wonders you can do with CSS. ( I don’t fully know how to do them but I know they exist).
    This is my question. What happens if I as a regular user want to actually print the side bars?? for example : there’s a coupon ( from one of these ad companies that give random ads) on the left bar that I want to print ? or a phone-number or address from a business on the right bar?
    what if I WANT the whole page to be printed in the exact same way I see it on screen??
    Should I mix some JavaScript and some buttons and <div’s> so I can give my user the options of
    1. print the article (then use print.css)
    2. print the whole page (use some other css suitable for print but that encloses every element on the page).
    3. buttons to print the left, right side bar???

    and then when they actually print the page get rid of the buttons using the <div> tag that encloses them??

    As a developer I see the beneficial part of using CSS and not having to create a second version of the same page for printing purposes, but as a user I feel that somebody is TELLING me (not asking) what are the things I can and can’t print. Probably is just me. Don’t get me wrong I’m NOT against CSS, on the contrary I think is the best thing ever created for the web. Having a way to separate content from presentation is something that’s always welcome in my toolbox.
    I’m just talking options here, not technical matters, options on what to print, that’s all.
    fer

    Copy & paste the code below to embed this comment.
  8. re: <a href=“http://www.alistapart.com/stories/goingtoprint/discuss/3/#ala-676”>Print Contents of a Text Box <a>
    —————————————————————————————————————————-
    Just define your input elements in the print.css without the borders (or with borders dotted to make them easy to see and differentiate) and then adjust the font size and appereance of those elements to something you’d like to see on paper.
    ie:
    input{
    border : thin dotted Black;
    color : Red;
    font : 12pt Arial, Helvetica, sans-serif;
    background : transparent;
    }

    Copy & paste the code below to embed this comment.
  9. Please help how to use JavaScript ‘print()’ method to let user print out my
    page while not print out the bottom line of my URL ?

    Thanks!

    Copy & paste the code below to embed this comment.
  10. Got some problems solved!
    I’m just experimenting with a redesign of my own page at http://www.xpw18.de – current efforts at http://www.xpw18.de/_demos/entwurf04/ – switching layout and markup to some style which is more simple and completely XHTML/CSS-based.
    Had problems with Mozilla getting page breaks done when printing. I don’t have floating ‘divs’ there so I wondered where the problem was rising from. Found out that ‘position:absolute;’ in a ‘div’ for the main content caused the problem. IE5.5 doesn’t matter, it gets the page breaks while printing.
    But there seems to be no possibility to get around the default printing margins the browser sets by itself. I know some people who set them to something about 2.5cm left and some 1.5cm top margin to get some comfortable space for older inkjet printers or for having the pages picked up in a folder.

    Copy & paste the code below to embed this comment.
  11. Thanks for the great article. But I have a problem, u may help solving it. When a line comes at the end of a page, the text is clipped; meaning part of the text in one page and the remainin part in hte next page!
    I am using IE6.
    I would appreciate anyone tries to help (via email is recommended).

    Copy & paste the code below to embed this comment.
  12. I was going blind with rage trying to figure out why my printing styles were doing wacky sheet and inheriting styles from other style sheets.

    The root of the problem:

    <link rel=“stylesheet” type=“text/css” href=“print.css” media=“print” />
    <link rel=“stylesheet” type=“text/css” href=“basic.css” media=“screen” />
    <style type=“text/css”> @import url(“sophisto.css”); </style>

    The solution:

    <link rel=“stylesheet” type=“text/css” href=“print.css” media=“print” />
    <link rel=“stylesheet” type=“text/css” href=“basic.css” media=“screen” />
    <style type=“text/css” media=“screen”> @import url(“sophisto.css”); </style>

    Copy & paste the code below to embed this comment.
  13. Hi Migs
    Has your problem been sorted out? I have a similar problem and I tried wot Damien suggested but it aint working. Please let me know if its solved and if yes, how u did it. If anyone else knows about the how the problems with Div tag with #include is sorted out, ps. post it here. You could refer to a detailed problem at http://www.alistapart.com/stories/goingtoprint/discuss/2/#ala-448

    Copy & paste the code below to embed this comment.
  14. Hi,
    (this may not be the place to post this, and if it isn’t please forgive me ALA)

    I’d already started using print specific css before I read this (and Eric’s) great articles.
    I’ve got a situation which someone here might have come across and may be able to offer advice.
    I’m having to print a table generated from a database via php, the table is an unknown number of rows and each row is an unknown size.
    The current table prints over 15 pages (no problem getting to print multiple pages) but some of the page breaks cut in the middle of lines so the lines are illegible, and (this is really weird) the width of the table shrinks as you move through the pages!!

    I have a feeling that you can’t have a clean page break within a continious table, but if anybody has any suggestions (especially about the width thing) I would be most grateful.

    Copy & paste the code below to embed this comment.
  15. A post earlier by Peter Sheerin gave me the clue, I created another php output which formatted the document using   tags instead of as a table.
    Then in the table version I used a <link title=“Printer friendly version” type=“text/html” rel=“alternate” media=“print” href=“weeklyprint.php”>
    which is called when someone presses print.

    Thanks Peter!

    Copy & paste the code below to embed this comment.
  16. Using Moz build 2002082306 to print the article seems to throw up very odd results for me. The font is a sans-serif and appears to be 14-16 point rather than 12??

    Anyone else having similar issues?

    Copy & paste the code below to embed this comment.
  17. div.nav {display: none;} does not work in IE6 on PC. Any ideas why? I need to get rid of the left nav so my copy doesn’t cutoff. Any suggestions are greatly appreciated. Thanks!

    Copy & paste the code below to embed this comment.
  18. Hi

    This must be so obvious that no-one mentions it …cos I can’t find help on it anywhere, but how do I print from a browser without the infernal windows header and footers appearing? I just want them to go

    please help…

    Copy & paste the code below to embed this comment.
  19. Why doesn’t the menu show up on the printable side (a good thing)? By what method is it hidden or omitted? Thanks!

    Copy & paste the code below to embed this comment.
  20. We are experienced web developers. It seems, unless you are using HTML, you could check your server CGI variables, see if the browser is print friendly, include the css print style. (If not, let them use the browser print and blame the browser for non-compliance!) Not supporting any browser over another here, but the standards should be supported by any major browser.

    Copy & paste the code below to embed this comment.
  21. Great article. Had experimented with this but now I can eliminate the print-friendly page.
    Anyone know when page-break-inside will be supported? Can’t find anything on this, although it’s in CSS2 it’s is not supported anywhere. Page-break-before and after seem to work.

    Copy & paste the code below to embed this comment.
  22. I am trying to use your example css on my company test site, but am having problems with the margin, the left margin in particular – it’s half-a-page wide, no matter which browser I print from, no matter what I set the margin percentage to, it just will not print to the left margin of the pager. Too weird. I ‘ve tested in IE6, Netscape7, Mozilla 1.1 and Opera 5 and 6. Then after that gets resolved there is the font size issue…

    Copy & paste the code below to embed this comment.
  23. My Printer wont print out!!!!1 the green light keeps flashin!!!!!!!!
    Ive changed the ink & its as defoult printer , Any ides Plz

    Copy & paste the code below to embed this comment.
  24. my printer wont print the green light keeps flashing green!!iv,e changed the ink & its as default printer . any ideas thankx

    Copy & paste the code below to embed this comment.
  25. I never realized that you CSS affects print quality so much.

    We were getting complaints from our client about the print versions of our pages.

    Until now we didnt know the cause.

    Please keep up the good work.

    Copy & paste the code below to embed this comment.
  26. So I’ve got the whole print css thing working, I can’t believe I never thought of this. :) Now I know you can set the page to print landscape or portrait, but with the footer, is there a way to make sure that it is always a the bottom of a page that I print, even if there is a lot of blank whitespace?

    Copy & paste the code below to embed this comment.
  27. I tried my pages in print preview with IE6 and found that only the active tab’s content is displayed. I used javascript to change visibility / display of other content divs, but I have a print sheet:

    div.tabs{display:none;}
    html body div.content{display:block !important;visibility:visible !important;}
    #nav{display:none;}
    title{font:20px bold sans-serif}

    No problem in Moz: I see the page displayed in print preview just like I want to see it. I linked the stylesheed in the head of my document, like this:

    <link rel=“Stylesheet” type=“text/css” media=“Print” href=’/stylesheet/print.css’ charset=“iso-8859-1” />


    You can see just about any page on my site to experience this. Here’s one:
    http://dhtmlkitchen.com/dhtml/ui/tooltip/

    Copy & paste the code below to embed this comment.
  28. Great article! I used it to create print and screen stylesheets – great results. Question: when updates are made to some pages, I change the BGCOLOR to “highlight” them. How can I preserve that effect in the print version? I have tried BODY {
    font-size: 10pt;
    background: inherit;
    background-color: inherit;
    }
    but had no luck. Thanks!

    Copy & paste the code below to embed this comment.
  29. I am learning to use CSS as much as possible. I link a single CSS file to a site with a straight forward link to the pages within the site.

    Q. The CSS shown for printing pages give reference to page options which are already taken care of for the page ‘look’. How do I link to the print page CSS without affecting the main site/page CSS?

    Do you have a print button/text which is somehow linked to the print page CSS?

    Thank you for any help you may be able to offer

    Andy

    Copy & paste the code below to embed this comment.
  30. Awesome article! I have definate need of being able to print web pages from our intranet. I’m fairly new to CSS, so what is happening when you included “!important” in your float definition for #wrapper or #content? It’s not a comment (\* , *\), right?

    #wrapper, #content {
    width: auto;
    margin: 0 5%;
    padding: 0;
    border: 0;
    float: none !important;
    color: black;
    background: transparent none;
    }
    Help?

    Copy & paste the code below to embed this comment.
  31. Yep.

    Copy & paste the code below to embed this comment.
  32. A colleague has the problem of putting headers and footers on pages when printed out. I referrred him to this article, but that particular feature doesn’t seem to have been mentioned. I intend to dig into my css reference books, since css isn’t my main specialty, I thought I ask for pointers. Anyone?

    Copy & paste the code below to embed this comment.
  33. i use a xerox docuprint 4508. all the lights are flashing eg paper jammed. paper empty etc and it will not print. obviously the paper is not the problem yet this message flashes on screen also, printer out of paper, can some one advise… anne

    Copy & paste the code below to embed this comment.
  34. Im trying to print some white text on top of an image. The approach is a simple image, and a layer positioning the white text on top of the image.

    I have a stylesheet with a screen and print type, and i can see that the print version is used.

    However, no matter how i put it, once my text color reaches a certain “lightness”, it starts fading towards grey instead of white. Pure white will produce grey.

    If i make a pure green, it will print pure green. Taking that same color and adding a little red and blue into it will have it gradually fade to grey instead of white on print.

    Anyone have a solution to this?

    Copy & paste the code below to embed this comment.
  35. I recently replaced ink cartridges (on my Canon S750 printer) and I can no longer print e-mail. It will print when I highlight, “Copy” and “Paste” the subject onto “Write”. I was able to always print out e-mail or whatever from it’s original display prior to the ink replacement. What did I do wrong?
    Thanks for any help.

    Copy & paste the code below to embed this comment.
  36. Someone asked about !important. I hadn’t remembered seeing that before either. It is explained here: http://www.w3.org/TR/REC-CSS1#important

    Basically, if I understand it correctly, by adding !important to a style, that style is forced to take precedence even when another style may normally take precedence by default. So by adding !important to a style that is absolutely necessary (for printing in this case) we do not have to worry about it being overridden by, say, a style defined within the body of the doc. (Could this be a solution to a few problems some have mentioned here?)

    Btw, the above reference is only part of a section which explains how one style gets preference over another. The entire section 3 may be helpful to anyone that is not sure how this works.

    Hope this helps.

    Copy & paste the code below to embed this comment.
  37. Some have taken issue with the lack of a printer friendly link when utilizing this solution. Some workarounds have been addressed by others. If you must you can still create such a page, although I like the suggestion to use some very simple javascript to simply print the current page.

    However, in my experience, the average user often overlooks the printer friendly link and complains that pages do not print in such a way that they are readable, thereby negating the value of the option. This alleviates that problem by ensuring that all pages look as intended when printed, no matter the level of the user (which makes it the best solution in my view). And if you feel obligated to provide the link for the more knowledgable/ observant, then by all means do.

    Thank you ala for providing another great article (to bad I didn’t read it sooner). Even the least intelligent of visitors to my sites can get the intended results whenever I follow your excellent advice.

    Copy & paste the code below to embed this comment.
  38. This was a great article, as have been all the ones I’ve read here. But I still have a question about something that’s happening to a site I’m working on. If you go to this page http://www.sassllc.com/index.asp and do a Print Preview, it looks OK. But if you go to http://www.sassllc.com/FAQ.asp and do the same, the text gets squeezed to the left of the content box.

    Am I missing something really obvious?

    Thanks so much! (If there’s a more proper place for me to be asking this, please let me know and I will forthrightly comply!)

    Copy & paste the code below to embed this comment.
  39. Hi, im new at css and i need this. I want a print this button on my page so im gonna have that link to a new page and i wanna put in this code to make it printer ready.. Now if anyone has any better ideas i would like to know :). But i dont really understand this code, well some of it. Could someone, very simply, tell me exactly where i need to put everything and what i need to change. Thanks!

    Copy & paste the code below to embed this comment.
  40. Its me again, same guy as before. Ok say i already have a style sheet on my page, because i already do. This will still work with it right?? Another question is, does this only make the printed page come out different it doesnt make it on the net look different??? I need to know how to use this because im very new at css and this is complicated, ahhhhh. By the way, i want to also make a print this icon. How would i make that work so it automatically printed?

    Copy & paste the code below to embed this comment.
  41. Great article and making me change how our new site is formatted. However…
    Like someone else in this thread I have menus on the left and removing them with display: none just leaves a blank space with the content still shifted across the page.
    How do I get the content back to use the empty space to the left?

    Thanks in anticipation.

    Copy & paste the code below to embed this comment.
  42. I’ve used the similar
    http://alistapart.com/stories/alternate/
    alternate CSS to create a fixed point font size for printing. But both on that, and also your sample page, my IE6 continues to print as if the screen font is not changed. (NN6 is fine though). In other words, IE6 completely disregards the visible changes on the screen, although it DOES print out according to size if I use the mousewheel to resize the print.

    Is this a known Win IE6 problem? Is it my setup? Is there any way round it?

    Many thanks

    Tony

    Copy & paste the code below to embed this comment.
  43. I cannot get the display: none to work. I’m using IE 6.0 to view my pages. I see it working on the article’s page but it isn’t working on mine. Ugh!!!!

    Copy & paste the code below to embed this comment.
  44. Very good article, I use tricks that explain and everithing works fine!

    Copy & paste the code below to embed this comment.
  45. Try {display: none !important;}

    Copy & paste the code below to embed this comment.
  46. Hi,

    First, thank you for a very good idea on print style sheets. I am a complete novice at this CSS thing so please be kind if the idea I’m about to suggest is flawed.

    I created a separate print style sheet as per the article and added it to my template with the following declaration:

    <style type=“text/css” media=“all”> import &#8220;styles.css&#8221;; &lt;/style&gt; <br /> &lt;link rel=&#8220;stylesheet&#8221; type=&#8220;text/css&#8221; media=&#8220;print&#8221; href=&#8220;print.css&#8221; /&gt; <br /> <br /> But I found that when I validated the CSS by URI it did so but the validator gave me warnings saying that I had several redefinitions in my CSS. Obviously the W3C validator reads both style sheets and adds them together, I don&#8217;t know. So I searched for a hack and couldn&#8217;t find anything until I came across the media tag.

    Within my style sheet (styles.css) I added the following:

    @media print {

    /* I then cut and pasted my print style sheet into this section */

    }

    It worked great and validated correctly, naturally that meant I could remove the line.

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

    So now I have a single style sheet that does two jobs. Some of you gurus may already know about this technique but I thought I’d share it anyway, plus someone may be able to develop it further.

    regards,

    Terry

    Copy & paste the code below to embed this comment.
  47. While I find the solution discussed in this article interesting, sometimes you want to offer visitors more than just the same page with different looks.

    Is it possible to instruct the web browser to choose a specific document when the user wants to print a page? Something like
    <link rel=“printable” href=“resume.pdf” />
    that basicallt says: “if the user wants to print this page, use the document resume.pdf”.

    Copy & paste the code below to embed this comment.
  48. This is a great article but I’m working with a site currently built with tables. Most of the code has worked (getting rid of graphics, changing fonts, etc.), but my text is being cut off by the right margin of the printed page. I’m not sure if this is b/c of tables or some other problem. The content is the center column of a three column table. Left and right columns are set to display:none. Any ideas?

    Copy & paste the code below to embed this comment.
  49. I printed this article in Safari 1.0 (v85) and the main content wrapped to a column only about 25% the width of the page. From IE, it looked fine. Is there a something in the CSS that can fix this? Or perhaps it’s a browser-bug?

    Copy & paste the code below to embed this comment.