11 What I've done

I’ve always liked print stylesheets so have tried to use them when possible. I’ve implemented my own technique that is partly based on work that has appeared here at A List Apart. You can view my technique here . I have many styles to choose from at the top, and one is for printing. It solves the problem of users wanting to print what they see, but does open other issues. The back button does break (though could fix this), and the print style isn’t offered to those not using JavaScript, but these days most people should have it enabled, though a default style is at least given to non-JavaScript users.

I don’t think there’s a reasonable 100% solution that solves all issues. It comes down to, why are visitors printing your pages, and how would most of them want to see it?

Nice article by the way.

posted at 05:46 pm on October 24, 2006 by Kendall Conrad

12 A way to disable the print CSS

If browsers evolved to be able to print what I see by giving me a magical check box []Disable Print CSS I would be thrilled. I just get annoyed (like Mark) with having to screenshot the page so I can simply print. Gives me that feeling in my stomach that I get when Word tries to capitalize at random and tell me it can do everything better than me.

(Although I’m all for Print CSS, they’re great – I just want my check box. And the “Printer-friendly page” link should be buried in the annals of history.)

posted at 06:09 pm on October 24, 2006 by Lia Scott

13 Disabling Print CSS

If browsers evolved to be able to print what I see by giving me a magical check box []Disable Print CSS I would be thrilled. I just get annoyed (like Mark) with having to screenshot the page so I can simply print. Gives me that feeling in my stomach that I get when Word tries to capitalize at random and tell me it can do everything better than me.

I feel this should be a browser feature, rather than a web author feature. The vast majority of people wouldn’t understand what they were getting, and so could end up making the wrong choice.

posted at 06:45 pm on October 24, 2006 by Stephen Down

14 RE: a way to disable the print CSS

Most of you reading this can already do this on your own!

Heck, I’ll even tell you one way:
Use Firefox and an extension like Chris Pederick’s Web Developer Extension that allows you to edit CSS on the page on the fly. Simply remove all rules that are “@media print {…}” or in a separate print stylesheet and you’ll get your “as is” print state. If you need to do it to multiple pages, make the edited rules “stick” with the appropriate button in said extension.

Adding a “print as is” button to the browser might be a convenient button for many of us here, but would be unused by 98% of the users out there and I fail to see why browser makers would put it high on their list of “to be added” features. Adding a “print as is” to a website as part of the interface would simply be a no-no (unless it were a designer-developer only site), confusing the vast majority of users.

posted at 07:03 pm on October 24, 2006 by John Lascurettes

15 How not to do it

I came across a great example of how not to implement printable pages today. Have a look at the DfES website and what happens with the various printing options!

• Normal page has no print stylesheet so prints with sidebars and everything if you just press Ctrl+P

• “Print version” hyperlink opens a new window, with a reflowed version of the page, that starts off with the two navigation menus and ends with a search box and a third menu. All links are clickable (opening another new window), but the differentiation between main menu and expanded submenu is lost – now it’s just one long list.

• The stylesheet on the print page sets the width of elements using px, and a font size for body text of “0.75em”.

I despair.

posted at 08:46 pm on October 24, 2006 by Stephen Down

16 How not to do it

I came across a great example of how not to implement printable pages today. Have a look at the DfES website and what happens with the various printing options!

• Normal page has no print stylesheet so prints with sidebars and everything if you just press Ctrl+P

• “Print version” hyperlink opens a new window, with a reflowed version of the page, that starts off with the two navigation menus and ends with a search box and a third menu. All links are clickable (opening another new window), but the differentiation between main menu and expanded submenu is lost – now it’s just one long list.

• The stylesheet on the print page sets the width of elements using px, and a font size for body text of “0.75em”.

I despair.

posted at 08:46 pm on October 24, 2006 by Stephen Down

17 Oops

Sorry for the double post. Opera didn’t refresh the page after submitting the first one :-(

posted at 08:48 pm on October 24, 2006 by Stephen Down

18 RE: RE: a way to disable the print CSS

Heck, I’ll even tell you one way: Use Firefox and an extension like Chris Pederick’s Web Developer Extension that allows you to edit CSS on the page on the fly. Simply remove all rules that are �@media print {…}� or in a separate print stylesheet and you’ll get your “as is� print state. If you need to do it to multiple pages, make the edited rules “stick� with the appropriate button in said extension.

Great idea, I had forgotten that feature of my favorite toolbar – however 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” …

Do you have a solution for that I overlooked?

posted at 09:12 pm on October 24, 2006 by Lia Scott

19 Is it a better Idea to use a PopUp?

When I click on the Preview-Button in the Mac OS Printer Dialogue, Preview pops up, showing a »Print« button and an »Abort« button. The Document which will be printed is displayed in the foremost window. So why don’t work with some Ajax to create a popup from the pagesource, using the print-stylesheets and serve two buttons to print and abort? It seems to be a better solution than doing something in the background of the print-dialogue.

posted at 09:14 pm on October 24, 2006 by Markus Schwarz

20 Print for documentation

I’m not sure why anyone would just print a page for documentation. Instead of a print screen you might want to use a screen grab extension in Firefox. Until I upgraded to Firefox 2.0, I used Screen Grab , but because Screen Grab is not Firefox 2.0 compatible, I’m using Pearl Crescent Page Saver . I’ll have to see how it works.

I think that using a print style sheet is in the best interests of the user and I don’t think that it should look anything like the page. After all, a printer is not a browser. The print CSS should optimize the page for a printer. If you’ve done that, the user shouldn’t be confused.

This is an interesting technique though I think that users will expect the back button to send them back to the page. As someone else said here, it might be better to open in a new window or use the query string to tell the page to use the print style sheet. This would allow a user to close the “print” window or use the back button for the link with the print instruction in the query string.

posted at 09:58 pm on October 24, 2006 by Tanny O'Haley