Replying to “No. 18”:http://www.alistapart.com/comments/printtopreview?page=2#18
“¦ the page that had most recently frustrated me does not have the @media print{} in thier css it’s instead in the header as a link rel=”?stylesheet”? media=”?print”? “¦
Well, in the case of Chris Pederick’s Web Developer extension, it’s not editable in that way; however, if using that extension it gets even easier: go to the WD tool bar -> CSS -> Disable -> Print Styles. Now print it. Ta da!
Copy & paste the code below to embed this comment.
Andrew Hoffman
It seems like losing the back button is too high a cost to incur given functionality that can be achieved by offering a print preview button or hyperlink leading harmlessly to a new page containing the same content.
would it be an idea to show the page with the print stylesheet as a preview, and then displayin the good ol’ print button in this preview… This way the user can see the preview and print it without knowing about how to print from the browser.
Copy & paste the code below to embed this comment.
John G
The example shown in the article gives the print dialog immediately, on top of the preview window. I think it would be a bit better to show a preview first, then allow the person to easily print. Flemming’s suggestion above is a good one for this.
Also, it seems to me that the old familiar link text “printer friendly version” (or something like it) is still in widespread use. I like this because it’s familiar by now, and it doesn’t leave any surprises in store: you know you’re getting a version suitable for printing, and there’s no wondering whether you’ll get a print dialog box, a preview, or both.
As a user (and infrequent web designer) I generally despise print stylesheets. I expect that printing the page I see in front of me will give me the page I see in front of me. If you assume you (as the web designer) know which parts I find redundant, you’ll be wrong often enough to leave a bad taste in my mouth. If I want a dry, content-only page, I would much rather have a “printer-friendly” link (a link that opens in the same window so I can use the Back button), see what I’ll get, and print that.
I also strongly agree with Nathan Jones above; I use “printer friendly” pages more often to read long articles without all the cruft.
To sum: give me a printer-friendly link, and keep the print stylesheet as minimal as possible.
I don’t know if this will work, but it’s something I’m contemplating – any suggestions welcome!
I will continue to use a print stylesheet, because despite what a couple of people here have said, my experience is that most people prefer pages to print without “fluff” (menus, ads, etc), nicely filling the page.
What I would like to do is to add a “view page as it will print” link that shows them a preview – but without having to do any recoding. What I’m thinking is to (using _, obviously) have a link that opens a new window with target name of “print”, and then use an unobtrusive Javascript to @import (again by _[removed]) the print stylesheet with media=all, overriding the screen stylesheet, if the window has name of “print”.
I don’t use server-side scripting or CMS, so short of making a copy of every page linked to the print stylesheet, I can’t think of an easier way of achieving this. The question is … will it work?
Stephen:
Using [removed] makes for very hard to debug javascript. You’re better off manipulating the DOM directly; just use the alternate style sheet code from the classic “A List Apart article by Paul Snowden”:http://alistapart.com/articles/alternate to change the stylesheet
would it be an idea to show the page with the print stylesheet as a preview
I’m not sure exactly what you mean here.
If you use the “print preview” function of your browser, it will render the page according to the print stylesheet.
If you mean having a link or widget on the page that will switch to the print stylesheet for screen display, that is one of the things that has been discussed here – and in particular, is exactly what I was talking about in #27. The question is the most effective way to do this.
If you run a database-driven CMS then it’s probably fairly easy to set up. For static .htm pages, not so easy without loads of Javascript.
Copy & paste the code below to embed this comment.
Jeff Metter
I’m trying to find a way to have a “printer friendly” link or button that will switch to an alternate style sheet so that then if the user goes file > print it will print with the alternate style sheet. But at the same time keeping it so if the user goes file > print without clicking “printer friendly” it will print with the default style or print the page “as is”.
I tried using this example:
http://www.alistapart.com/articles/alternate/
But it seems that in IE when you switch to an alternate style sheet and try to print, it prints with no style.
In this example you have a style with media=print so the user can never print the page “as is”. If you don’t use a print=media style is there a way to print with an alternate style sheet in IE?
Copy & paste the code below to embed this comment.
Tom Panton
I think this example would be fine if the preview opened up in a new window and included an actual print button rather than automatically launching the print dialog. This behavior would mimic the actual user process of printing a page with an initial preview. This is what typical users want and expect.
I’ve been trying to figure out how to make this example work in this fashion, but I’m not super proficient in JS. Does anybody have any suggestions?
32 Reader Comments
Back to the ArticleJohn Lascurettes
Replying to “No. 18”:http://www.alistapart.com/comments/printtopreview?page=2#18
Well, in the case of Chris Pederick’s Web Developer extension, it’s not editable in that way; however, if using that extension it gets even easier: go to the WD tool bar -> CSS -> Disable -> Print Styles. Now print it. Ta da!
John Lascurettes
Feh! Blasted Textile. WD tool bar > CSS > Disable > Print styles. Print it.
Andrew Hoffman
It seems like losing the back button is too high a cost to incur given functionality that can be achieved by offering a print preview button or hyperlink leading harmlessly to a new page containing the same content.
Flemming Hoffmeyer
would it be an idea to show the page with the print stylesheet as a preview, and then displayin the good ol’ print button in this preview… This way the user can see the preview and print it without knowing about how to print from the browser.
John G
The example shown in the article gives the print dialog immediately, on top of the preview window. I think it would be a bit better to show a preview first, then allow the person to easily print. Flemming’s suggestion above is a good one for this.
Also, it seems to me that the old familiar link text “printer friendly version” (or something like it) is still in widespread use. I like this because it’s familiar by now, and it doesn’t leave any surprises in store: you know you’re getting a version suitable for printing, and there’s no wondering whether you’ll get a print dialog box, a preview, or both.
Daniel Wachsstock
As a user (and infrequent web designer) I generally despise print stylesheets. I expect that printing the page I see in front of me will give me the page I see in front of me. If you assume you (as the web designer) know which parts I find redundant, you’ll be wrong often enough to leave a bad taste in my mouth. If I want a dry, content-only page, I would much rather have a “printer-friendly” link (a link that opens in the same window so I can use the Back button), see what I’ll get, and print that.
I also strongly agree with Nathan Jones above; I use “printer friendly” pages more often to read long articles without all the cruft.
To sum: give me a printer-friendly link, and keep the print stylesheet as minimal as possible.
Stephen Down
I don’t know if this will work, but it’s something I’m contemplating – any suggestions welcome!
I will continue to use a print stylesheet, because despite what a couple of people here have said, my experience is that most people prefer pages to print without “fluff” (menus, ads, etc), nicely filling the page.
What I would like to do is to add a “view page as it will print” link that shows them a preview – but without having to do any recoding. What I’m thinking is to (using _, obviously) have a link that opens a new window with target name of “print”, and then use an unobtrusive Javascript to @import (again by _[removed]) the print stylesheet with media=all, overriding the screen stylesheet, if the window has name of “print”.
I don’t use server-side scripting or CMS, so short of making a copy of every page linked to the print stylesheet, I can’t think of an easier way of achieving this. The question is … will it work?
Daniel Wachsstock
Stephen:
Using [removed] makes for very hard to debug javascript. You’re better off manipulating the DOM directly; just use the alternate style sheet code from the classic “A List Apart article by Paul Snowden”:http://alistapart.com/articles/alternate to change the stylesheet
Hemant Kumar
would it be an idea to show the page with the print stylesheet as a preview
Stephen Down
I’m not sure exactly what you mean here.
If you use the “print preview” function of your browser, it will render the page according to the print stylesheet.
If you mean having a link or widget on the page that will switch to the print stylesheet for screen display, that is one of the things that has been discussed here – and in particular, is exactly what I was talking about in #27. The question is the most effective way to do this.
If you run a database-driven CMS then it’s probably fairly easy to set up. For static .htm pages, not so easy without loads of Javascript.
Jeff Metter
I’m trying to find a way to have a “printer friendly” link or button that will switch to an alternate style sheet so that then if the user goes file > print it will print with the alternate style sheet. But at the same time keeping it so if the user goes file > print without clicking “printer friendly” it will print with the default style or print the page “as is”.
I tried using this example:
http://www.alistapart.com/articles/alternate/
But it seems that in IE when you switch to an alternate style sheet and try to print, it prints with no style.
In this example you have a style with media=print so the user can never print the page “as is”. If you don’t use a print=media style is there a way to print with an alternate style sheet in IE?
Tom Panton
I think this example would be fine if the preview opened up in a new window and included an actual print button rather than automatically launching the print dialog. This behavior would mimic the actual user process of printing a page with an initial preview. This is what typical users want and expect.
I’ve been trying to figure out how to make this example work in this fashion, but I’m not super proficient in JS. Does anybody have any suggestions?