Make Webpages Easier On The Eyes With Readable

readable_headHave you ever needed to read something that is on a horribly formatted website? I am talking about white text on a light colored background or dark purple text on a dark background.  Maybe the page you need to retrieve some knowledge from is riddled with pornography? Or maybe you are sensitive to all the penile enlargement advertisements?

Any which way an awesome “Bookmarklet” site called Readable is about to change the way you deal with sites like this.

Up until now I would have to copy the entire text from the web page using Control ““ A and then Control – C. I would paste my results into a notepad window and read it there. Now with Readable located here this is no longer necessary and all I need to do is click a button in my browser.

I know at first glance this can be a little confusing and that is why I am including the author’s “Silent Film” below:

If you are still interested in Readable we will cover how to use and configure it below. After browsing on over to their website you are greeted with the screen you see below. Simply click on either gray bar (on both sides of the main text) and you will be given a configuration screen and the ability to drag your bookmarklet to your favorites.

readable1

After clicking on the grey bar you will see the following options:

readable2

As you make changes to your Font, Font Size, Layout, Color and margins it will be represented in the preview below Step 2. If you like what you have done all you need to do is drag the readable bookmarklet to your favorites bar. I have shown this below in Firefox 3.

It is the same thing for most other modern browsers where you can drag a link and save it as a favorite. The favorite then has the java code that is executed. You can see what it is running by hovering over it with your mouse. Now that we have it configured let’s give it a try!

readable3

I found an article that I wanted to read. It is located here. I browsed on over to that webpage and hit my new bookmarklet.

readable4

After hitting my Readable button this is what I was returned with:

readable5

This will be a huge help to me in my day to day web browsing and researching modes.

Anyone use something similar? Do you love this or hate it? Share your comments with us – guess where? In the comments!

Did you find this useful? Share it with others

More articles about:

14 Comments


Karl L. Gechlik

Karl L. Gechlik here from AskTheAdmin.com doing a weekly guest blogging spot for our new found friends at MakeUseOf.com. I run my own consulting company, manage AskTheAdmin.com and work a full 9 to 5 job on Wall street as a System Administrator.

Similar Stuff

The comments were closed because the article is more than 180 days old.

If you have any questions related to stuff mentioned in the article or need help with any computer issue, just ask it on MakeUseOf Answers.

Hide 14 Comments

  • Mike April 8, 2009

    I prefer Tidyread. It just keeps what you want and throws out the rest. I also like the zooming window!

    http://www.tidyread.com

  • Dan April 8, 2009

    Very nice.
    Firefox users with css knowledge can use the stylish extension to further tweak the displayed text. I personally didn’t like the way it behaved when scrolling so I tweaked the behavior by adding the following stylish rule:


    #readable, #readable_background, #readable_iframe, #readable_container
    {
    height: 100% !important;
    }

    #readable {
    overflow: scroll !important;
    }

  • heart April 8, 2009

    i am using readability, that i also found via makeuse
    http://www.makeuseof.com/dir/readability/

  • Gabriel Coarna April 8, 2009

    Thanks for the nice review.
    I’m glad you enjoy Readable. I hope it actually makes reading on the web more comfortable for you — and all your readers.

    A few things you didn’t mention:

    1. Readable will not replace your current page, just provide an overlay on top of it. This is very non disruptive to your normal way of browsing sites.

    2. Sometimes Readable’s automatic content extraction doesn’t work. When that happens, all you have to do is select the text you want to make readable and click the bookmarklet again.

    3. If you select the content first, Readable will work in almost any website — not only articles pages (eg. pages with long blocks of texts)
    (Readable can even be used in Gmail, if you’d like)

    Also, if you like the current version of Readable, you’ll love the next version. I’m working hard on V2 right now, and I can tell you it’s going to be much better. Smarter, faster, with better fallback support for when automatic extraction does not work, and, last but not least, with a lot more options.

    Gabriel Coarna,
    Readable’s developer

  • Yonathan April 8, 2009

    Arc90 Lab’s Readability is much easier to set up:
    http://lab.arc90.com/experiments/readability/

  • and April 9, 2009

    Opera Browser: accessibility layout

  • Blinq April 9, 2009

    I use a firefox add-on called “Accessibar” which allows the user to manipulate various aspects of a page individually. Download from:
    https://addons.mozilla.org/en-US/firefox/search?q=Accessibar&cat=all

  • jeyem April 10, 2009

    thanky gabriel for a great product…

    i’ve compared your readable and readability and yours is definitely better…

    using the same website, i ran the two programs… while both did not extract the whole page, at least readable shows the first part while readability jumps into the middle…

    when i highlighted a paragraph, readable shows it perfectly…

    surprisingly, readability shows the same paragraph (as with the whole page extraction) even when i chose another one… weird…

    and readable has more options… hurray!

    i can’t wait for V2…

    thanky again gabriel (and makeuseof—hehehe)

  • Frank April 13, 2009

    I like CleanPage the best. It works perfect for removing ads.

    Download from:
    http://www.ieaddons.com/en/search/?search=cleanpage