Tuesday tip: Clean up web pages before printing

If you’re often “printing” web pages as PDF to your DEVONthink database, you might enjoy the following hack: The little bookmarklet switches a web page shown in your web browser (definitely works with Safari and Firefox) to design mode, making it possible to edit it on the fly before printing. Edit as you like, the changes are, of course, not saved to the originating web server. Don’t worry.

To get the bookmarklet, open the following mini web page in your browser and follow the instructions: Make editable.

26 Responses to “Tuesday tip: Clean up web pages before printing”

  1. Jon says:

    I like Printliminator (sorry, no link, but Google is close). It allows you to quickly click on sections and remove them for printing.

  2. Mike says:

    All great, BUT I use the Devonthink Clipper – to save perfect PDFs of web pages, and this does not work with it. So, how about an edit feature tied into the clipper. Now that would be really valuable.

  3. nev says:

    I didn’t think it was working at first, because it just made the page editable instantly. Would it be possible to give some visual feedback that the page has been made editable? I guess not.

    Plus – I agree with Mike – it would be great if this could somehow be used prior to using the clipper extension.

  4. Manfred says:

    Great utility – allows you to fully edit text, like e.g. adding extra spaces.
    I have also been using the Firefox plugin “Nuke Anything Enhanced” which lets you remove objects, selected text and – very useful – ‘remove everything else’ except the selected part. However, it has no editing options.

  5. Zeljko says:

    Right now we have limited editing options for webarchive files, but I would welcome the option to make it more user friendly (along the lines Print Friendly and Printliminator do it). What bothers me more is that it’s not possible (as far as I know) to print such edited webarchive as a one-paged WYSIWYG PDF file.

  6. Johnny says:

    Hey, I’m Johnny, the person that submitted this tip.

    The purpose of this bookmarklet is to allow you to simply select and backspace over any superfluous elements on the page. You’re also able to make corrections if you so desire, since the text does become fully editable.

    For me, it means the difference between printing a 5 page PDF to DEVONthink with four of those pages filled with ridiculously long sidebars and article comments, or simply printing one very clean page with just the content you need.

    It employs the secret design mode hidden away in most modern browsers, and while it can be quirky to learn how it works, you will soon get to grips with it. Just make a text selection over the content of the whole sidebar and hit backspace. Repeat for any other sidebars and comment areas or anything else you want to remove, and then print to PDF. Voila! 😉

    To Nev – it would be possible to make it notify you that the page is now editable, sure, but once you’ve actually used it once you know that it works on the first click. 😉

    Anyway that’s it for me. Enjoy, everyone!

    – Johnny

  7. nev says:

    This is brilliant! If you find that clipping pages pulls in a lot of crud that obscures your document, make it editable and take out the offending parts (I’m repeatedly using ‘cut’ from the contextual menu, taking out whole divs given over to ads, etc), and then, save the page (in my case from Safari) as a web archive to the Finder. You can keep that – or better, drag it to DTPO, and then use the contextual menu to ‘Capture PDF”, which results in a beautiful PDF of the page without the stuff you didn’t want.
    Really useful !!

  8. sawxray says:

    Sorry, but it doesn’t work in Safari 5.1.4

    Dragged to bookmarks bar, but nothing happens when I click.

    Is there anything I can check to correct this?

  9. Eric says:

    You will not see anything but the page becomes (silently) editable.

  10. Bobby Ray says:

    Just used it in Safari 5.1.4. No problems – so far.

  11. Johnny says:

    @nev: Glad you like it, but I have a tip for you! Instead of saving as a web archive and then locating it wherever you saved it, right clicking it, and selecting “Capture PDF”, I can instead offer a much faster method which is as follows:

    * Find the page you want to archive.
    * Run the bookmarklet and remove the crud from the page.
    * Hit Cmd+P to “Print”.
    * Look in the bottom left corner where it says “PDF”; click that button and select either “Save as PDF” if you want the file on your desktop or whatever, or “Save PDF to DEVONthink” if you want to send it immediately to Dt’s inbox.

    Note: The “Print: Save PDF to DEVONthink” works in any application on OS X that supports printing! Handy tip when you want to quickly dump something as PDF to Dt!

    I think I’ve given out all the tips I know regarding this bookmarklet now, so I’ll be bidding farewell. 🙂


  12. sjk says:

    The QuickNuke extension is similar to the Printliminator and PrintFriendly.com:

    Canisbos Safari Extensions

    Any of those can be convenient to use before invoking “Make editable” (or similar) to do additional editing (e.g. adding/deleting text).

  13. Eric Weir says:

    Sounds interesting, but I do not know what “bookmarklet” you are referring to. Does it show up on the toolbar or the web page?

    On another note along the same line, I now get a “reader” button on the right end of the address bar whenever I select a specific article on a website. It presents a cleaned up copy of the article with options for printing or saving as a pdf.

    It “cleans up” the page a little too much for my purposes. E.g. it includes no information about the source/original location of the article, nor any about the date of publication.

  14. Eric Weir says:

    I meant to say that my browser is Safari. I believe the “reader” function started showing up as of an update quite a while back now. Perhaps other Safari users are aware of it now, but thought I’d mention it just in case.

  15. Zeljko says:

    Right now, I only get “PDF” and not “PDF + Text” kind of files in DT, when using make editable. Would it be possible that the text of the resulting PDF is actually searchable (without having to use “Convert to Searchable PDF” option”?

  16. eboehnisch says:

    @ Zeljko: How do you create the PDF in DEVONthink: Via Clip to DEVONthink?

  17. Zeljko says:

    @eboehnisch: No, I just print what is left on the screen after I use the “Make editable” bookmarklet provided here. However the results are the same when I use PrintWhatYouLike, Printliminator or Print Friendly bookmarklets/services.

  18. Zeljko says:

    @eboehnisch: To be precise i use “Save PDF to DEVONthink Pro”. Is this the same as “Clip to DEVONthink”?

  19. eboehnisch says:

    @ Zeljko: Just did that here and I get a nice PDF (included searchable text). From which page do you create such a PDF? And can you email me a screenshot of the browser window just before you actually print to DEVONthink?

  20. Ox says:

    “Zeljko says: Right now, I only get PDF and not PDF + Text kind of files in DT, when using make editable.”
    – You should be seeing “PDF+Text”. This is my process: Find a page, edit out the crud, Cmd+P, “Save PDF to DEVONthink PRO” from the PDF menu in the bottom left, and I get a “PDF+Text” file in Dt. I even tried it again to verify that it says “PDF+Text” for me. And yes, the files are searchable. Have you checked that your “Kind” column in Dt is not too narrow to fit the whole word?

  21. Zeljko says:

    @Ox: I use the same procedure Ox, and no, “Kind” column in Dt is not too narrow to fit the whole “PDF+Text”. It is possible to select text in such PDF file, but when I try to copy it, I get bunch of “␣” signs instead.

    @eboehnisch: I sent you an email yesterday.

  22. Ox says:

    That is very mysterious. You say you get the same result no matter what you print from. Try making a plain TextEdit document and printing that to PDF. Do you still get the issue? If so, it might mean that something is wrong with your OS X’s “Print to PDF” feature, although I’ve never come across such a problem myself.

  23. Zeljko says:

    @Ox: Mysterious indeed. Until now I would say that it happens only after using “Make editable” bookmarklet in Chromium. But then I tryed to edit this very page in Safari and resulting PDF has only background without any text (the same happens in Chromium too).

  24. wendayuan says:

    why not automate?just like EverNote’s web Clipper?

  25. […] scripts to capture information from various sources. Today, I learned of one called “Make Editable” a bookmarklet script for Safari and Firefox. When activated, it switches the browser page […]