So my modification of the Readability bookmarklet kind of snuck out before it was ready, but it's my own fault. Now I'm scrambling a little to make it more presentable and less of a straight-up hack of the excellent original. I wanted to make a few things clear about my goals and purpose on this one.
First the entire project was really a subset of my attempt at a better Evernote clipper for Snow Leopard. One which allowed me to preserve code formatting and automatically remove comments and ads from the post, in a smarter fashion than the current Safari clipper does. I built it as a System Service and run it with a hotkey. You can download it and try it out, if you like. I'll make a more accessible version with instructions shortly.
This is why I removed the formatting options from the bookmarklet... Evernote was going to strip all of that out anyway. Originally, I was just using the code to strip out ads and find the meat. The modifications to preserve code blocks, movies, etc. were simply working toward the "perfect" Evernote clip.
It works for what it is, but wasn't really intended to be used without the Evernote Service. If I get enough feedback, and no cease and desist orders from the original creators, I'll continue to modify it. One thing you can certainly do to help is provide me with URL's to pages it fails on; the more scenarios I can study, the smarter I can make it.
While I applaud your effort, naming the tool ReadAbility2 is really a misnomer since the options of the original are what really make work nicely; i.e., you end up with a page that is readable with options that the user selects. Since your tool isn’t about readable web pages, perhaps a name change is appropriate.
I don’t disagree. The name was a quick decision, just an internal homage to the original authors. This version really wasn’t ready for mass exposure, and I agree that the focus is not so much on readability as on locating content and preserving important formatting. I’ll come up with something… “Clipability,” perhaps.
I click on the link to the “clipable” site and it indicates to “drag to bookmarks toolbar.” I am using IE 7 and I cannot DRAG it to anything.
With the original “Readability”, I was able to drag it to the “Links” folder in My Favorites and then open it in my Links Bar in the browser where it now sits.
First, will this work with IE7 and if so, how do I get it installed? Help a Senior Citizen out, please.
Clippable works fine on the first page of a multiple page site but if I try it on the second page it reverts back to the first page. The second page doesn’t work with Clippable. Any options for this?
They don’t actually function in the clipped page, right? No hover pops up for me. You’d just like to turn the links into plain text, then? Let me know before I start tackling the challenge :).
That particular link yields the expected results… I loosened the original requirements for processing of a div to accommodate linked images wrapped in divs, so the little block of links is par for the course. I tried some other pages, though, and you’re right: the formatting is SOOO bad there’s not much I can do about it. Readability/Clippable scans for divs, and DMN has wrapped their content in span tags. That’s not even “legal” HTML, so I can’t really modify for that without making a whole new set of site-specific functions. Sorry :(.
I’ve been using Clippable/Readability2 plenty on my computer for reading articles, and I realized that my iPod touch benefits from it, except x1000 because there’s so much less screen space in the first place. But with a couple of modifications it works even better.
In readability.js: var readStyle=‘style-newspaper’; var readSize=‘size-midlarge’; var readMargin=‘margin-narrow’;
Then add a size-midlarge option to the css file, it’s really just a matter of preference but I found medium a little too small and large a little too large; I settled on 22.
The last thing is to add a tag which seems to tell the ipod to see the width of the article as the width of the page and lock the zoom– sometimes it takes a double tap after you run the bookmarklet though. Basically add this to the end of the bookmarklet code:
Also– if you didn’t know, It’s a bit of a pain to add bookmarklets to Mobile Safari. Basically you have to copy and paste the contents of the bookmarklet into the URL field of an existing bookmarklet.
Basically, just put the link in plaintext so it can be copied– you can’t click on a javascript link and copy the contents of it, for some reason.
The goal of Clippable is to create “clippable” text for copying to other programs/readers, handling single images and code blocks better than the original. While customizability is possible, I think you’ll find the original Readability bookmarklet probably does what you want, doesn’t it?
Just added a couple of styles that you can access with the left and right arrow keys. It’s not as good as having default styles yet, but I’m working on that.
I love Clippable — a gift for sore eyes. But I wish I could ‘Esc’ (or otherwise backtrack) to the orginal page to continue surfing, reading another link, etc.
[…] uses code unceremoniously lifted from the original Readability. For more information, see the post here. If you’re an iPhone user, be sure to check out Clippable […]
Hello, my name is Brett Terpstra, and it’s nice to meet you. Elegant solutions to complex problems. Curious?
Readability2 leaks out
Nov 02
2009
So my modification of the Readability bookmarklet kind of snuck out before it was ready, but it's my own fault. Now I'm scrambling a little to make it more presentable and less of a straight-up hack of the excellent original. I wanted to make a few things clear about my goals and purpose on this one.
First the entire project was really a subset of my attempt at a better Evernote clipper for Snow Leopard. One which allowed me to preserve code formatting and automatically remove comments and ads from the post, in a smarter fashion than the current Safari clipper does. I built it as a System Service and run it with a hotkey. You can download it and try it out, if you like. I'll make a more accessible version with instructions shortly.
This is why I removed the formatting options from the bookmarklet... Evernote was going to strip all of that out anyway. Originally, I was just using the code to strip out ads and find the meat. The modifications to preserve code blocks, movies, etc. were simply working toward the "perfect" Evernote clip.
It works for what it is, but wasn't really intended to be used without the Evernote Service. If I get enough feedback, and no cease and desist orders from the original creators, I'll continue to modify it. One thing you can certainly do to help is provide me with URL's to pages it fails on; the more scenarios I can study, the smarter I can make it.
Related posts:
25 Responses to “Readability2 leaks out”
While I applaud your effort, naming the tool ReadAbility2 is really a misnomer since the options of the original are what really make work nicely; i.e., you end up with a page that is readable with options that the user selects. Since your tool isn’t about readable web pages, perhaps a name change is appropriate.
I don’t disagree. The name was a quick decision, just an internal homage to the original authors. This version really wasn’t ready for mass exposure, and I agree that the focus is not so much on readability as on locating content and preserving important formatting. I’ll come up with something… “Clipability,” perhaps.
I click on the link to the “clipable” site and it indicates to “drag to bookmarks toolbar.” I am using IE 7 and I cannot DRAG it to anything.
With the original “Readability”, I was able to drag it to the “Links” folder in My Favorites and then open it in my Links Bar in the browser where it now sits.
First, will this work with IE7 and if so, how do I get it installed? Help a Senior Citizen out, please.
Thanx…Tomaz
Ref my earlier email regarding installing on IE7. I just got it to work: dooh!!
Thanx for a terric tool and great health and luck in the future with all you do.
“Tomaz.…. ——Orig email—-
I click on the link to the “clipable” site and it indicates to “drag to bookmarks ”
Thanks, Tomaz, glad it’s working. I wasn’t sure what was going wrong there :).
Clippable works fine on the first page of a multiple page site but if I try it on the second page it reverts back to the first page. The second page doesn’t work with Clippable. Any options for this?
Can you give me an example url for one of these articles?
Hi Brett,
Thanks for Clippable, I love it! Works great, nice work.
I’d like to see it remove those context-sensitive mouseover Vibrant ads like at the top of this page: http://www.entrepreneur.com/startingabusiness/businessplans/article38308-3.html
What do you think?
Chris
They don’t actually function in the clipped page, right? No hover pops up for me. You’d just like to turn the links into plain text, then? Let me know before I start tackling the challenge :).
Dallas Morning News, almost always a problem.
This page is fine with readability, linky with clippable
http://www.dallasnews.com/sharedcontent/dws/dn/latestnews/stories/012310dnmethappy.4263c78.html
But most of the time, it’s nothing but links.
Of course DMN has terrible formatting, don’t know if you can do anything with it.
I use the tool most everyday, with about 30 newspapers, grateful and no complaints.
Thanks for the report, I’ll gladly take a look at it.
That particular link yields the expected results… I loosened the original requirements for processing of a div to accommodate linked images wrapped in divs, so the little block of links is par for the course. I tried some other pages, though, and you’re right: the formatting is SOOO bad there’s not much I can do about it. Readability/Clippable scans for divs, and DMN has wrapped their content in span tags. That’s not even “legal” HTML, so I can’t really modify for that without making a whole new set of site-specific functions. Sorry :(.
Hi Brett,
I’ve been using Clippable/Readability2 plenty on my computer for reading articles, and I realized that my iPod touch benefits from it, except x1000 because there’s so much less screen space in the first place. But with a couple of modifications it works even better.
In readability.js: var readStyle=‘style-newspaper’; var readSize=‘size-midlarge’; var readMargin=‘margin-narrow’;
Then add a size-midlarge option to the css file, it’s really just a matter of preference but I found medium a little too small and large a little too large; I settled on 22.
The last thing is to add a tag which seems to tell the ipod to see the width of the article as the width of the page and lock the zoom– sometimes it takes a double tap after you run the bookmarklet though. Basically add this to the end of the bookmarklet code:
The final result will turn a nytimes.com page (and any other article!) into a pretty close simulacrum of the view in the NYT app.
Brilliant. Do you mind if I publish that (with full credit)?
Yeah for sure, I don’t have a blog set up atm so it’s probably easiest!
I might talk to whoever it is behind the original Readability, maybe add an iPhone option? Anyway I used your version of it, so go for it.
If you do set something up with Arc90, let me know. Otherwise, I’ll implement a separate bookmarklet as soon as I have the time to handle it!
http://brettterpstra.com/2010/02/26/clippable-updated-goes-mobile/
I still need to get some credit to you for the idea, I was too tired when I wrote it to remember. Coming shortly!
Also– if you didn’t know, It’s a bit of a pain to add bookmarklets to Mobile Safari. Basically you have to copy and paste the contents of the bookmarklet into the URL field of an existing bookmarklet.
Basically, just put the link in plaintext so it can be copied– you can’t click on a javascript link and copy the contents of it, for some reason.
awesome app. it would be great if we could customize the settings before dragging the bookmarklet à la http://readable-app.appspot.com/setup.html
i like yours better because it focuses just on the text i’m interested in reading and not the adds etc.
even just letting me customize the Color/Theme and Font Size would be great.
The goal of Clippable is to create “clippable” text for copying to other programs/readers, handling single images and code blocks better than the original. While customizability is possible, I think you’ll find the original Readability bookmarklet probably does what you want, doesn’t it?
Just added a couple of styles that you can access with the left and right arrow keys. It’s not as good as having default styles yet, but I’m working on that.
I love Clippable — a gift for sore eyes. But I wish I could ‘Esc’ (or otherwise backtrack) to the orginal page to continue surfing, reading another link, etc.
Duly noted, and a good idea. I have to check on the technical feasibility, but that would be very useful. Thanks!
Escape key is now functioning!
[…] uses code unceremoniously lifted from the original Readability. For more information, see the post here. If you’re an iPhone user, be sure to check out Clippable […]
Saying…
…
Follow me on Twitter
Writing…RSS
Listening (last.fm)
Reminiscing…
Sorting…
Delicious >
Twitter >
Flickr >
TUAW >
Entries (RSS) and Comments (RSS).
Switch to Mobile version