We've moved.


The new version of Readable can be found at the above URL.

1. Choose Your Style

3. Bookmarklet

The button above is your bookmarklet. You need to put it in your browser's bookmarks bar.

First, you should try dragging it there. If dragging doesn't work, right click the button and bookmark the link from the context menu.

4. How to use

On any page, click the bookmarklet. If that doesn't give you what you want, select the text you want to read and then click the bookmarklet.

I highly reccomend you read the tutorial.

2. Preview (If you don't like the way it looks, tinker with 1.)

Upgrade to Readable V2

From your URL, I gather that you've been using Readable since it's V1 release. Thanks for that.

In V2, quite a few things have changed. Readable is now smarter (it will work on most relatively short blog posts), more customizable, and provides better fallback support for when "Automatic Content Extraction" fails.

Because of the new options in Readable 2, you have to update your bookmarklet. It's the same thing you did the first time around — you just have more options that you can tweak.

To have a look at all of the new options, tick the "Full Control" checkbox.

  • If you'd like, you can now follow Readable on Twitter.

  • if you're feeling grateful, you can make a donation to support Readable's development.

  • If you didn't read the tutorial the first time around, please consider reading it this time.

Integration with Better Web Readability

All of Readable's settings have just been set to values specified by Better Web Readability. You are free to further tweak these settings — changing color themes or font sizes, for example — and thus end up using your own custom style.

However, Vladimir did ask me to tell you that he reccomends you don't fiddle with the settings — at least not if you want to go for the intended Better Web Readability effect.

I, on the other hand, believe the user (you) should have complete and total control over the way the content looks. So go ahead and fiddle to your heart's content; if you want to, Readable allows you to.

The Better Web Readability CSS Framework is a project by Vladimir Carrer. Its purpose is to help websites be more readable.

As Readable's purpose is to help users read websites more comfortably, you can easilly see why Vladimir and I got together and integrated Better Web Readability into Readable.

This is the base typographic style that is applied to your content. Basically, the base tells paragraphs, headings, images, and inline elements (bold, italic) how they should appear in relation to each other.

Browsers are a bit inconsistent when it comes to the default styles they apply. That's why, if you don't know exactly what this does, you should stick with the Blueprint default.

Based on the Blueprint CSS framework. Most people agree it looks much better than the browser defaults.
Readable will not apply any style on top of your browser defaults.

This is the typeface that will be used to render your content.

Unfortunately, not all type faces are available on all operating systems. That's why Readable currently offers you a selection of font style and not font family.

Based on your style selection, Readable will tell your browser to choose between a list of font families that best match the chosen style. Then, based on your operating system, your browser will choose the font that is available to you.

Wide / Sans Serif
Verdana, Geneva
Narrow / Sans Serif
Helvetica, Arial, Tahoma
Wide / Serif
Palatino Linotype, Palatino, Book Antiqua, Georgia, Utopia
Narrow / Serif
Times New Roman, Times
Wide / Monospace
Lucida Console, Andale Mono, Monaco
Narrow / Monospace
Courier New, Courier

The size (in pixels) you would like the Font Family to be rendered at.

From now on, whenever you see em used in the other settings, remember that 1 em = the chosen font size.

The height of one line of text — relative to the font size.

The text alignment.

Left aligned for languages with a left-to-right layout. Right aligned for languages with a right-to-left layout.
Will tell your browser to justify the text using it's own algortihms.

The alignment of images, relative to the surounding text.

Images will be centered
Float left
Images will be floated left — if they are small enough to fit and still ensure readable text.
Float right
Images will be floated right — if they are small enough to fit and still ensure readable text.
Strip all images
Readable will remove all images from the text.

The width of the text-box.

EM width
EM widths are baed on the font size you have chosen.
Percentage width
Will set the width of the text-box as a percentage of the browser window width.

The alignment of the text-box — relative to the transparent background.

The text-box wil be centered in the browser window.
The text-box wil be left aligned in the browser window.
The text-box wil be right aligned in the browser window.

The margin between the text box and the surrounding transparent background — relative to the font size.

The margin between the text-box and the text it contains — relative to the font size.

The color theme.

A color theme is made up of foreground color, background color, border colors, link colors, and transparent background color.

Themes suggested by our users:

Olive / Black
This theme was suggested by Joe Golton, at FilterJoe.com.
Off Yellow / Off Black
This theme was suggested by Vladimir Carrer, at vcarrer.com.

If you'd like to suggest a color theme, get in touch. You can find our email address on the "More Information" page.

The transaprency degree for the transparent background.

The color of the transparent background.

You can either let this be chosen by your color theme choice, or you can override it.

The action Readable should take, if it encounters Flash videos on the page (or in the manually selected content).

Strip all videos
Readable will remove all videos.
Keep videos from major sites
Readable will remove all videos except for the ones from the major video hosting sites. The allowed list currently consists of YouTube, Vimeo, Yahoo, and Flickr.

Readable provides an extensive set of options that can be tweaked according to user preference.

By default, in this setup window, we only show a limited set of said options.

If you would like to see all the options, tick the checkbox next to "Full Control".

(The layout of the page will change slightly — to accomodate for the large set of options).

This section also allows you to apply all of the styles specific to the Better Web Readability CSS framework.

? Full Control