Unfortunately, if you're using the NoScript extension, you're going to have to "Temporarily Allow" scripts on each page where you want to use Readable.

Readable requires JavaScript, and there's no way around it; please turn it on, or use a better browser.

It appears you have JavaScript turned off, or are using a browser that doesn't support it.

Readable is an application that helps you read more of the web. It reformats text — on any website — according to your exact specifications.

Keep tinkering until this looks good to you.

Just above: the bookmarklet . You need to put it in your browser's Bookmarks Toolbar ; do that by either dragging it there, or by using the right-click menu.

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.

One or more Font Families, in quotes — separated by commas, if more. The first Font Family that is available on your computer will be used. You can also use most of the Font Families available in Google's Font Directory. "Microsoft Sans Serif"

"Calibri", "Constantia"

"Cardo"

One or more Font Families, in quotes — separated by commas, if more. The first Font Family that's available will be used. You can also use most of the Font Families available in Google's Font Directory. "Consolas"

"DejaVu Sans Mono", "Inconsolata"

One or more Font Families, in quotes — separated by commas, if more. The first Font Family that's available will be used. You can also use most of the Font Families available in Google's Font Directory. "Microsoft Sans Serif"

"Calibri", "Constantia"

Pixels, Points, or Percentage. 16px

12pt

150%

Number (multiplication factor), Pixels, Points, or Percentage. 1.5

24px

18pt

150%

EMs (1em = current font size), Pixels, or Percentage. 30em

480px 60%

Hexadecimal or RGB color. #F0F0F0

rgb(240, 240, 240)

Hexadecimal or RGB color. #222222

rgb(34, 34, 34)

Enter any custom CSS that you would like applied to the page. Make the background 10% transparent. #background { opacity:0.9; filter:alpha(opacity=90); } Indent every paragraph. p { text-indent: 1em; } Make links bold. a { font-weight: bold; }

Enter the absolute URL to a small logo image that you would like displayed at the top of the Readable overlay.