Lyle: re: “While many of these options aren’t ‘simple’ for the masses, they are much, much simpler than the approach outlined in the article.”
I get the sense from your comment (and other people’s comments) that this may not have been clear enough in the article: this was never intended to be a method for “the masses”/end-users printing, it is aimed directly at web developers. These web developers most likely have Firefox installed and already have a working knowledge of CSS – enough to make this technique work. After all, we are users too, and why shouldn’t we use the tools we have to make our end-user experience better?
re: “Why in the world would someone want to go to all this trouble just to print a web page “better”?”
The first time I tried to do this, it was because an article I wanted to print was 7 pages long, mostly filled with items that were irrelevant to the article – images, ads, site navigation, and other related items. There wasn’t a print friendly version, so I ended up taking it into my own hands and used the tools I had at my disposal. When I was done, I had an article that printed in two pages and only contained what I wanted on it. That’s why I started doing it elsewhere as well…
re: “Even the most technically advanced web developers wouldn’t want to use this approach on a regular basis”
Agreed. The first time I used this technique, it took me about 20 minutes to get the article I wanted to print into a form with which I was happy. Any that I have done recently have taken less than 5 minutes, and I save them for later so that I don’t have to use the approach on a regular basis.
Now, if I had claimed that this was a way to bring better print versions to the all end users, well then, yes, I would have been kidding… ;)
I just add a class called “noprint” to elements that I don’t want to have printed. Create a stylesheet where media=“print”, create font sizes, colors, weight, etc for the text and add:
.noprint {display: none;}
and since class=“noprint” has no entry in the media=“screen” stylesheet, it has no effect onscreen.
Copy & paste the code below to embed this comment.
Michael Maggard
For what it’s worth I use IE6 and have no problem applying my own stylesheet.
Actually, I cheat, I use a free ‘shell’ for IE called MyIE2 that extends (and fixes) it tremendously. Tabbed browsing, filtering, mouse gestures, load Gecko engine, etc. It also offers it’s own plugin architecture and among “Show Blocks”, “Toggle Tables”, and “Rulers” is “My Style”; a one-button stylesheet substitution.
I make most use of “My Style” to ‘correct’ otherwise difficult to read sites. Tiny-white-text-on-a-black-background? No more! Too many fancy effects applied to the content, so it’s more akin to a ransom note then a coherent series of paragraphs? Fixed! And yes, after restyling, ‘bout everything is suitable for printing.
I like the idea of this, but am not sure I can quite spend the time creating custom style sheets for each site I print from, especially given how often sites change structure. I do quite like the idea, in principle, of a custom print style sheet though – something I have not yet added to my version of Opera …
This is the way I use Firefox posibility’s very often. To everyone: try it and you’ll never choose another way. While I say this, maybe this isn’t the best option. Try it, compare it, en use it if it’s in your opinion the best method.
Did I miss this? Is it me or are the dev tools not compatible with Firefox under os X? Firefox ‘unexpectidly quits’ when I try to install the dev tools?
Firefox 0.8 on Mac OS X crashes for any extension installation – this is one case where a nightly might be better. See The Burning Edge [http://www.squarefree.com/burningedge/]
Copy & paste the code below to embed this comment.
Michael Cohen
1. Select the text you want to print
2. Open up Composer (Mozilla’s WYSIWYGHTML editor)
3. Paste
4. Selectively (and visually) remove any imbedded ads, adjust font sizes, etc. to your liking
5. Print
Heck, this even works with IE to en extent, although when you copy HTML-formatted text in IE, it doesn’t retain the HTML codes in the BG like Mozilla/Firefox do.
This method also allows easy combination of articles that are spread out onto multiple web pages to be combined and printed.
No hassles included. ;)
Dante, as the resident (vocal) Opera user (:p), could you let us know how this kind of method (copy from browser, paste into WYSIWYG editor, print) works when copying from Opera?
Copy & paste the code below to embed this comment.
Jason George
Great article, especially the link to Chris Pederick’s Web Developer Tool.
As someone who is still learning the ins and outs of CSS, I would frequently grab a site and its CSS, and disect it by adding different colored borders to the various block level elements in order to disect the site (as I’m sure all you gurus once did before you were gurus). Now I can do that with just a button click! Coolness!
Mmmbeer hit the nail on the head with “display:none” rather than “visibility: hidden” (at least for me). Worked like a charm – thanks! No more annoying whitespace!
The print stylesheet I’m designing will hopefully keep people from having to cut/paste or jump through assorted hoops just to get an article’s text. These media-specific CSSs made a lot of sense, especially after reading Molly Holzschlag’s and Eric Raymond’s books – their approach seems to be “make it simple to code and use. Appealing and pragmatic.
44 Reader Comments
Back to the ArticleDerek Featherstone
Lyle: re: “While many of these options aren’t ‘simple’ for the masses, they are much, much simpler than the approach outlined in the article.”
I get the sense from your comment (and other people’s comments) that this may not have been clear enough in the article: this was never intended to be a method for “the masses”/end-users printing, it is aimed directly at web developers. These web developers most likely have Firefox installed and already have a working knowledge of CSS – enough to make this technique work. After all, we are users too, and why shouldn’t we use the tools we have to make our end-user experience better?
re: “Why in the world would someone want to go to all this trouble just to print a web page “better”?”
The first time I tried to do this, it was because an article I wanted to print was 7 pages long, mostly filled with items that were irrelevant to the article – images, ads, site navigation, and other related items. There wasn’t a print friendly version, so I ended up taking it into my own hands and used the tools I had at my disposal. When I was done, I had an article that printed in two pages and only contained what I wanted on it. That’s why I started doing it elsewhere as well…
re: “Even the most technically advanced web developers wouldn’t want to use this approach on a regular basis”
Agreed. The first time I used this technique, it took me about 20 minutes to get the article I wanted to print into a form with which I was happy. Any that I have done recently have taken less than 5 minutes, and I save them for later so that I don’t have to use the approach on a regular basis.
Now, if I had claimed that this was a way to bring better print versions to the all end users, well then, yes, I would have been kidding… ;)
Julian Rickards
I just add a class called “noprint” to elements that I don’t want to have printed. Create a stylesheet where media=“print”, create font sizes, colors, weight, etc for the text and add:
.noprint {display: none;}
and since class=“noprint” has no entry in the media=“screen” stylesheet, it has no effect onscreen.
1beb
Excellent article, I’m glad to see that people are extending the use of Mozilla’s products, that’s what they are made for.
Michael Maggard
For what it’s worth I use IE6 and have no problem applying my own stylesheet.
Actually, I cheat, I use a free ‘shell’ for IE called MyIE2 that extends (and fixes) it tremendously. Tabbed browsing, filtering, mouse gestures, load Gecko engine, etc. It also offers it’s own plugin architecture and among “Show Blocks”, “Toggle Tables”, and “Rulers” is “My Style”; a one-button stylesheet substitution.
I make most use of “My Style” to ‘correct’ otherwise difficult to read sites. Tiny-white-text-on-a-black-background? No more! Too many fancy effects applied to the content, so it’s more akin to a ransom note then a coherent series of paragraphs? Fixed! And yes, after restyling, ‘bout everything is suitable for printing.
http://myie2.com/
http://www.kogeneracija.co.yu/myie2/plugins.html
ILoveJackDaniels
I like the idea of this, but am not sure I can quite spend the time creating custom style sheets for each site I print from, especially given how often sites change structure. I do quite like the idea, in principle, of a custom print style sheet though – something I have not yet added to my version of Opera …
Xyppie
This is the way I use Firefox posibility’s very often. To everyone: try it and you’ll never choose another way. While I say this, maybe this isn’t the best option. Try it, compare it, en use it if it’s in your opinion the best method.
Dante
MyIE2 rocks doesn’t it? I used it for a whole year, but had to uninstall it after a virus snafu.
Of course, if you like MyIE2 you’ll LOVE Opera 7.23. I’m in love with this browser.
david
Did I miss this? Is it me or are the dev tools not compatible with Firefox under os X? Firefox ‘unexpectidly quits’ when I try to install the dev tools?
Chris Neale
Firefox 0.8 on Mac OS X crashes for any extension installation – this is one case where a nightly might be better. See The Burning Edge [http://www.squarefree.com/burningedge/]
The Lizzzard
to deal with the less time we’ll have ;)
Rockland
I get the same crash, with 0.7. Guess I should upgrade.
Michael Cohen
1. Select the text you want to print
2. Open up Composer (Mozilla’s WYSIWYG HTML editor)
3. Paste
4. Selectively (and visually) remove any imbedded ads, adjust font sizes, etc. to your liking
5. Print
Heck, this even works with IE to en extent, although when you copy HTML-formatted text in IE, it doesn’t retain the HTML codes in the BG like Mozilla/Firefox do.
This method also allows easy combination of articles that are spread out onto multiple web pages to be combined and printed.
No hassles included. ;)
Dante, as the resident (vocal) Opera user (:p), could you let us know how this kind of method (copy from browser, paste into WYSIWYG editor, print) works when copying from Opera?
Jason George
Great article, especially the link to Chris Pederick’s Web Developer Tool.
As someone who is still learning the ins and outs of CSS, I would frequently grab a site and its CSS, and disect it by adding different colored borders to the various block level elements in order to disect the site (as I’m sure all you gurus once did before you were gurus). Now I can do that with just a button click! Coolness!
theo
yeah, war about your browsers …….
dudes ………. try a girl … you’ldn’t care about your darling browsa !
ppffff ………. pretty nerdzzzzzz 8|
kill your self, it should be better for this world !
Florian
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
Florian
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
Florian
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
Florian
Who spent 15 minutes to make a perfect print?
It’s much easer to copy paste the content in word and print it.
bullishme
Who spent 20 minutes sending 4 messages which are exactly the same ?!?!?
mmmbeer
Why are you using the visibility property?
Wouldn’t it be far more effective to use display: none;
Then at least you won’t have inexplicable and unnecessary whitespace on your printing
Jack Cole
Mmmbeer hit the nail on the head with “display:none” rather than “visibility: hidden” (at least for me). Worked like a charm – thanks! No more annoying whitespace!
The print stylesheet I’m designing will hopefully keep people from having to cut/paste or jump through assorted hoops just to get an article’s text. These media-specific CSSs made a lot of sense, especially after reading Molly Holzschlag’s and Eric Raymond’s books – their approach seems to be “make it simple to code and use. Appealing and pragmatic.
Great article!
Rolex Replica
The idea is GR8, but it will be a pain to create a custom style sheets for each site I print from………..
porneL
“I humbly submit to the esteemed authors of this site to please consider that 90% of everybody uses IE6. I hate it, it sucks”
So do not hack your website to be full-featured in IE. If you stop making “all sites work in IE” it will cease to be the ultimate argument.
Instead of tons hacks I suggest adding only one:
<!—[if IE]>You want this page to print well? Get latest Opera or Firefox.<![endif]—>
diseño web
congratulations for the article.