Reading through twitter I stumbled across this tweet from Clearleft's Jeremy Keith. He mentioned a bookmarklet that adds readability to your site through removing distracting elements and increasing text size.

So i thought...well, why can't i add this bookmarklet to my site?, in case people want to read the articles that I've written without visual distraction. So I did, and you can see it on any of the single post pages on my site.

It's really simple, just go to the Arc90 Readability Bookmarklet Generator and pick your settings, then right click on the bookmarklet, and select "copy link" or "copy link address", then all you have to do is set up a div with the text of your choice in it:

<div id="readability"><p><a href=" ">Make This Post More Readable</a></p></div>

And set up some style rules in your CSS file for that DIV:

 #readability {
background-image: url(images/readability.png);
background-position: 12px left;
background-repeat: no-repeat;
padding: 5px 5px 5px 24px;
}

And then simply paste in the link from the bookmarklet into the 'href' field of your link:

javascript:(function(){readStyle='style-novel';readSize='size-large';readMargin='margin-medium';_readability_script=document.createElement('SCRIPT');_readability_script.type='text/javascript';_readability_script.src='http://lab.arc90.com/experiments/readability/js/readability.js?x='+(Math.random());document.getElementsByTagName('head')[0].appendChild(_readability_script);_readability_css=document.createElement('LINK');_readability_css.rel='stylesheet';_readability_css.href='http://lab.arc90.com/experiments/readability/css/readability.css';_readability_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_css);_readability_print_css=document.createElement('LINK');_readability_print_css.rel='stylesheet';_readability_print_css.href='http://lab.arc90.com/experiments/readability/css/readability-print.css';_readability_print_css.media='print';_readability_print_css.type='text/css';document.getElementsByTagName('head')[0].appendChild(_readability_print_css);})();

And you're done! don't forget to download the book icon (if you want it) from here, the icon is from the awesome famfamfam silk icon set. Don't forget to adjust the path to it in the CSS I gave you.

And the results speak for themselves, here is an article from the guardian before using readability:


And After:

So there! now your posts are more readable there's no excuse not to be writing top-notch content! Don't forget that you can style this to look like whatever you want! Enjoy...

A Note On Browser Compatibility

I can't see anything on the official website with regard to this, but i'd assume that it's fairly exclusive to modern browsers, and in the case of the IE's you should probably see it working with IE7+, but i can't verify that. But it should be fine in your Safari's, your Firefox's and your google Chrome's, as well as any other browser that is up to date.