Grow your CSS skills. Land your dream job.

Quickly Make Any Page Print Nicely (with The Printliminator)

Published by Chris Coyier

Introducing The Printliminator!

I had this idea when I was at a lyrics site trying to print out some lyrics. The page didn't have a good print stylesheet and was full of all kinds of crap. I copied the source code and made a local version of the site and dumped some simple jQuery stuff in there to make it so any thing I clicked on was eliminated from the page. Turns out it's the current version of the DOM that gets sent to the printer, so I could eliminate things at will and have them not print. Cool!

After the idea was in place, I went back and forth with Devon Govett turning it into a more full-featured bookmarklet. The current iteration has click-to-remove elements, with a really cool feature of option-clicking to remove everything except the selected element. There are more features, and I think the video explains it better than I can with words:

To grab it, head over to the demo page and drag the bookmarklet link into your bookmarks bar. Click it on any page to activate.

Comments

  1. Just awesome! I love it! This is something I could use on a daily basis…. +FAV!

  2. Kyle Kinnaman
    Permalink to comment#

    That is slick and very useful. I don’t print much but I can see this being very useful.

  3. A useful idea well done – recently bookmarked it!

  4. Permalink to comment#

    This is awesome!!

  5. For a PC, use ALT + Click.

    Looks really useful, although I try not to print out that much.

  6. Permalink to comment#

    Very cool. It would be handy if it had a reset or undo button. This will be great to combine with Evernote. (I’m not affiliated with them, just love the product).

  7. 阿呆
    Permalink to comment#

    why BLIP.TV ,I can’t watch it.

  8. Permalink to comment#

    Looks neat but I can’t drag it to my Address bar in IE8, it is complaining about a java script error on line 53, object expected.

  9. Kirk
    Permalink to comment#

    I know that it’s a BETA, but it doesn’t seem to work in IE8, in either mode. Looks great in Firefox though! Amazing idea.

  10. Joel
    Permalink to comment#

    Chris,

    With ink at $25/gallon, you have just saved me money and that warrants a thanks! Thank you! More importantly, I’d say this feature, if adopted widely, could be responsible for saving thousands if not millions of pages of paper and that’s just plain awesome for the environment!

    KUDOS!

  11. jr
    Permalink to comment#

    This is simply amazing.
    Great work!
    Bookmark…check.
    tell everyone i know…check

  12. Sweet, pretty cool stuff. Good job Fellas.

    I thin you guys should take it one step further and go for a Firefox Plug-In too.

    Green = Good.

  13. Chris is there a way of getting this to work with Internet Explorer 8?

    If there is please let me know :)

  14. Permalink to comment#

    I take that back, I can get it loaded into IE but the red highlight box does not appear in IE7 or IE8 making it a little less intuiative.

    • The reason it doesn’t work in IE (any version) is because IE does not support the outline CSS property which we use to show the highlight. I am working on a solution.

    • Doug
      Permalink to comment#

      Ever get this fixed?

  15. Darren
    Permalink to comment#

    This is very easy to use, I recently printed a lot of stuff off a website and thought to myself that it would be nice not to have to print the junk too, Thanks for this :)

  16. Jay
    Permalink to comment#

    A Firefox Plugins already exists with similar functonality.

    http://karmatics.com/aardvark/

    • Sander
      Permalink to comment#

      yes id does seem similar even has more options i like the fact that you can go wider/narrower to move up and down in the tree of elements to parent elements and down to child again…

      and it exists also as a bookmarklet

      though had i not known aardvark i would have started using this. it is just so usefull.

      ofcourse chris made the menu look alot nicer than the simple aardvark text explanations :)

    • Eric
      Permalink to comment#

      Chris’ also follows the KISS rule. Which i think works wonderfully here. 80% of users only use 20% of your options.

    • Permalink to comment#

      Isnt that kiss and purito?

      Simply awesome Chris, outstanding work!

  17. Permalink to comment#

    Sleek, intuitive, useful, and (most importantly) eco-friendly.

    Definitely a keeper in my bookmark toolbar. Excellent work, gents.

  18. Eric
    Permalink to comment#

    Chris.
    This is great, i dont print much but when i do i hate it when people don’t use a print stylesheet.
    The js file that the bookmarklet links to is not minified. If you minify it you trim off about 1K from the file. I know its not much, but you could add a comment to the full code so people could have that if they wanted to edit it.

  19. Edison
    Permalink to comment#

    Simply awesome, thank you!

  20. Permalink to comment#

    I kind a knew that this was coming sooner or later after you showed us your initial idea on the Podcast.

  21. Very cool. Reminds me of the Readability Bookmarklet: http://lab.arc90.com/experiments/readability/

    One potential improvement would be change the highlight colour from red to green when Option- or Alt-clicking. Just a minor visual cue to indicate that you’re selecting instead of removing.

  22. AdamA
    Permalink to comment#

    Very useful, thanks for sharing this!

  23. Nice tip! On the video tutorial it didn’t get rid of the google ad. Was that because it was on the same div?

  24. Permalink to comment#

    This is great but I work really fast so I’ve been deleting things that I didn’t need to! Whenever you do an update, please add an undo button if possible!

    I know I should probably slow down but that capability could be very helpful!

    Otherwise, this is great b/c I use Chrome not FF.

  25. Dave Durose
    Permalink to comment#

    Very, very nice! Love it!!

  26. Permalink to comment#

    Great job! That’s really useful!

  27. bang
    Permalink to comment#

    just when i needed to print something, u come with this, and it worked nicely.
    now all i need is to replace my defect printer :)

    thanx a lot for this nice printlimitator

  28. Excellent! Totally cool idea, works great.

    I have it in my bookmarks bar as “✄</>” to save space. :)

  29. very nice and this can be quite helpful for many ages that are not able to save and print i have also going to write something about this on my blog.

  30. Awesome app, installed it… looks really handy :).

  31. Permalink to comment#

    Awesome bookmarklet. FYI for Firefox users, there is a full-fledged addon for this:

    https://addons.mozilla.org/en-US/firefox/addon/4111

  32. Permalink to comment#

    Great, For sure I’ll keep using this :).

  33. Wrigw
    Permalink to comment#

    Nice, nice, nice!

  34. Excellent!!!

    just one thing, i can´t delete flash objects

  35. Great tool, as too many sites don’t make good use of print style sheets.

    Should anyone want to make the process easier on their site visitors, I suggest visiting http://printFancy.com – a gallery of websites in print.

  36. Danilo
    Permalink to comment#

    This is a great tool man, I don’t print much from the web but what i do do is to save websites (Tutorials Mostly) to my hardrive along with images and ads that comes with them which is really annoying, this would be great if the selected hidden objects would not download with the page, may be this could be implemented in the future, Anyway thanks for this chris.

  37. Permalink to comment#

    Chris, you’re a genius!

  38. Armin Hackmann
    Permalink to comment#

    Hey Chris,

    great tool, Thank you!

  39. Permalink to comment#

    oh man. This is so good. Great job!!!!!

    Great way of removing ads from a page as well :)

  40. Permalink to comment#

    Brilliant!

    If it’s possible to make it remember what you “delete”, you have just made the best add block ever!

  41. Anna
    Permalink to comment#

    Very nice, thanks!

  42. Ron
    Permalink to comment#

    Hi
    this is amaizing but it does not become draggable on IE 8 (suprise:)

  43. Ryan
    Permalink to comment#

    Chris, this is great. Any chance we can get a favicon for the bookmarklet? I thought it would use the css-tricks favicon, but it didn’t save (maybe it is just my FF).

  44. Navin
    Permalink to comment#

    Awesome! Even works when saving a webpage for offline viewing (only checked Fx3.5). Now if only it had a feature to undo previous actions, it would be perfect. Thanks for this amazing piece of work.

  45. Permalink to comment#

    Wish I had checked out my bloglines earlier yestereday. What I usually do when I find a page I need to print I create print style sheet through firebug but forget that noise when I got printliminator! Very cool.

  46. Victor Oliveira
    Permalink to comment#

    Chris this is great!!!!
    May I suguest add a undo option in case my happy trigger finger remove content that i really needed to print??

    Thanks keep it up man!!

  47. Permalink to comment#

    This is really awesome! The most impressive and useful bookmarklet ever!

  48. Permalink to comment#

    you da man Chris, this is very nice! I’m passing it onto co-workers.

  49. Permalink to comment#

    Awesome work Chris! (and everyone else involved).

  50. Interesting. I have been using the Scrapbook add-on for Firefox to do just this for some time. If you are not using Firefox, or don’t need to save the altered page, this is a great solution. Thank you.

  51. This is slick and cool. One more add to my bookmarks!

  52. Strawbeard
    Permalink to comment#

    Very nice! Alt-Click seems to be Option-Click on Windows. Too bad, that it is already taken by the “Flashgot” extension (a download helper). An extra button on the widget (“keep only selected”) would help.

  53. Excellent idea. What do you think if this can be used for something similar: for example – to enable visually impaired people by reading to them while hovering or tabbing from paragraph to paragraph, or by removing images and replacing with alt or title block?

  54. Awesome APP. very helpful I can say THANKS DUDE

  55. Sander
    Permalink to comment#

    Awesome app! love it!

  56. Awesome job chris.. First I just started looking at the video and thought you must be talking about some site which which gives this service of printing in this way.. then when I started reading the introductory paragraph I realized you and your friend created this! Nice thinking.. Though I don’t print stuffs from the web much.. but am sure this will always be useful in the future :)

    Oh and I see you got your twitter feed box back… the footer was looking lonely without your tweets lol

  57. Permalink to comment#

    This is AWESOME! [one feature request: can you add an undo button? ]

  58. Permalink to comment#

    Really nice!

  59. nick
    Permalink to comment#

    hi
    when clicking on ads, it does remove them, but they open up in a new tab, is there a way of removing ads without them opening?
    thx
    great tool, thanks for sharing !!

  60. mojoriesen
    Permalink to comment#

    drag to bookmark doesn’t seem to work for IE7. I can manually copy the shortcut to a bookmark, but this would be a nice feature add. Oh, and in testing, it doesn’t really outline nicely in IE7 either. Since that’s a major share of the browser market it would be nice to see it work for that like the video does in Safari.

    Still cool though.

  61. Great tool! I don’t print stuff anymore but if I ever do again this would be a life saver. Thanks for sharing

    Cheers

  62. This is just what i need, thank you.

  63. Permalink to comment#

    Very cool, is it possible to maybe change that Garamond font though? *shudder*

  64. Jason Ploegman
    Permalink to comment#

    Just awesome man.

  65. grimdeath
    Permalink to comment#

    Grats on making it on Lifehacker!

    Printliminator on Lifehacker

  66. That’s brilliant!

  67. Carrie
    Permalink to comment#

    You are a special guy :)

  68. This is brilliant. Truly nifty, and I can see myself using this technique often. Bravo on the idea, and thank you for the implementation!

  69. arnold
    Permalink to comment#

    oh thanks chris. I just need it right now. Brilliant idea! nice work!

  70. lazy sunday
    Permalink to comment#
  71. Permalink to comment#

    Very nice work! Is it possible to save the new html/source after you trim it?

  72. Callum
    Permalink to comment#

    Thanks for this, makes printing a whole lot easier!

  73. Permalink to comment#

    I read somewhere that the best practice to include a print stylesheet is to use @media in css and don’t use media attribute in xhtml. What’s your opinion?

  74. toufoo
    Permalink to comment#

    I like it, but it does’t work on yahoo news page for IE7, e.g.

    http://news.yahoo.com/s/ap/20091012/ap_on_re_as/as_pakistan

  75. Permalink to comment#
  76. This idea is cool and I am firmly convinced that it will work properly in the future.

  77. Nice find Chris, usually for something like this I would just highlight what i want and then select “print selected” but is limited. With this tool i can select exactly what I want. Thankfully I don’t use IE but sure they will have it working on there soon.

  78. arnold
    Permalink to comment#

    I found something similar , I think its good to …http://www.printfriendly.com/

  79. Aaron
    Permalink to comment#

    Fantastic!

  80. This is pretty slick and easy to implement technique. Thank for sharing :)

  81. Permalink to comment#

    This is a great tool!! Thank you for sharing this.

  82. SFdude
    Permalink to comment#

    Hi Chris,

    Works in a PC with SLAX Linux (from: slax.org),
    booted & running as a “Live Linux CD”.
    (No HD install).

    But… the useful, floating 4 button Toolbar, does not show up
    when you click on the Bookmarklet…
    (Firefox 3.5.5 here).

    Help Chris!
    SFdude

  83. lasse
    Permalink to comment#

    I’ve had these problems.

    My work around was using the developer tools in chrome to delete the surrounded elements.
    Or if i just wanted a single element or “wrapper” i would simply pull it out from the body and then delete the body element. Leaving the dragged element the only thing present.

    But this is nice if you don’t like messing with that stuff, great idea.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".