A bookmarklet is almost like a regular old bookmark. But, instead of it storing a URL, it stores code — most often, JavaScript code.

When you click a bookmark, you get taken to the URL; when you click a bookmarklet, that piece of code is executed.

So, basically, bookmarklets allow programmers to encapsulate code — possibly very complicated code, like Readable — into nice little buttons, to which you then have one click access to.

The Bookmarks Toolbar is something that every browser has. It's purpose is to store bookmarks you access very frequently.

Now, because bookmarklets are basically just bookmarks, they fit right in. As a matter of fact, many people only use the Bookmarks Toolbar to store various bookmarklets — while storing their actual bookmarks in the hidden away Bookmarks Menu, or a folder on the Bookmarks Toolbar.

In case your Bookmarks Toolbar isn't visible, here's how to make it show up:

Mozilla's Firefox

Menu » View » Toolbars » Bookmarks Toolbar

Google's Chrome

Menu » Tools » Always show bookmarks bar

Apple's Safari

Menu » View » Show Bookmarks Bar

Microsoft's Internet Explorer

Menu » Tools » Toolbars » Favorites Bar

Opera

Menu » View » Toolbars » Bookmarks Toolbar

You're on a iPhone, iPod, or iPad. Unfortunately, that means that you can't just drag-and-drop the bookmarklet to your Bookmarks Toolbar — because you don't have one.

Instead, you have to manually copy the code above, and then add it as a Bookmark.

Tinker with the selects under Choose Style, on the left: for every option, you can either select a predefined value, or insert your own custom value. The Preview pane will update accordingly.

When you've settled on a style, put the the bookmarklet in your browser's Bookmarks Toolbar; do that by either dragging it there, or by using the right-click menu — just like you would for a regular bookmark.

That's it. Make sure you read "How To Use" as well, and you're set to go. Happy reading.

Whenever you're on an article page, no matter the website, just click the Readable bookmarklet; a reformatted version of the article will appear on top of the original page.

"What's an article page?", you ask; good question. An article page is any page that contains one large block of text — like, for example, all newspaper articles. Readable is only designed to automatically process these kinds of pages.

On any other type of page, you can still take advantage of Readable, but in manual mode: simply select the text you would like Readable to display, and then click the bookmarklet.

When you're done reading, double-click the background to dismiss the Readable overlay.

Tinker with the selects under Choose Style, on the left: for every option, you can either select a predefined value, or insert your own custom value. The Preview pane will update accordingly.

That's it. Make sure you read "How To Install" as well, and you're set to go.

Copy the JavaScript link, which si just plain old HTML code, to your website's pages — preferably, only to article pages.

"What's an article page?", you ask; good question. An article page is any page that contains one large block of text — like, for example, all newspaper articles. Readable is only designed to automatically process these kinds of pages.

Also, please note that you can modify the link: you can change its caption, or you can wrap it around an image.

You can modify the way Readable parses your page, by adding special CSS Classes to HTML elements on the page.

readable__delete

Add this class to an element that Readable keeps after parsing, but that you would want it not to keep.

readable__keep

Add this class to an element that Readable deletes while parsing, but that you would want it to keep — the target element needs to be inside what Readable detects as the main content element on the page.

readable__add_before

Add this class to any element that you would like appended before Readable's output — the target element needs to be outside what Readable detects as the main content element on the page.

readable__add_after

Add this class to any element that you would like appended after Readable's output — the target element needs to be outside what Readable detects as the main content element on the page.

Font Family

The font that gets applied to the entire text.

Headers

The font applied to Header elements.

Mono-space

The font applied to Computer Code elements.

Size

The font size that gets applied to the entire text.

Leading

The height of each line of text, relative to the Font Size.

Lines Of

The width of each line of text, before it is wrapped.

Back Color

The background color.

Fore Color

The foreground color — the text color.

Link Color

The color used for links.

Justified

Should the text be displayed as justified?

Base

The base style for the page; also known as a CSS Reset.

More CSS

Specify your own, custom, CSS.

A few predefined styles themes you can choose from. Click to activate. If you'd like to design a style for Readable, get in touch.

Default

Readable's default theme

Dark

An inverted theme

Smaller and Lighter

Smaller font size and lighter colors

Smaller and Crisper

Smaller font size and crisper text

Bigger and Smoother

BIgger font-size and smoother text

Better Web Readability

Designed by Vladimir Carrer.

A few predefined color themes you can choose from. Click to activate. If you'd like to design a color for Readable, get in touch.

Light Grey

Light Grey, Light Black, and Bright Blue

Dark Grey

Dark Grey, Off White, and Light Blue

Off White

Off White, Black, and Bright Blue

Light Brown

Light Brown, Light Black, Light Red

Light Green

Light Green, Light Black, Light Red

Olive

Olive, Black, and Bright Blue
Designed by Joe Golton.

Web Readability

Lightish Yellow, Almost Black and Light Blue
Designed by Vladimir Carrer.