Bookmarklets

Also known as “favelets,” these bookmarklets are scripts that affect the current page you are viewing. To install, they should be dragged to your bookmark bar or otherwise saved as if they were bookmarks.

(The source code is on GitHub; your improvements are welcome!)

Tabify Textareas §

This bookmarklet will let you indent and outdent text in any textarea on the Web, using Tab & Shift-Tab on your keyboard. (More info.)

For the script on which it’s based, see my “Tabby” repo on GitHub.

Allow Text Selection §

The antidote for sites that actively prevent you from selecting text (like some lyrics websites). More here. (Updated 2016-06-27!)

à la Instapaper §

Since I wrote this, it’s been obviated by the iReader Chrome extension and Safari’s built-in reading mode, both of which strip out extraneous cruft from the page, unlike this bookmarklet.

Modeled after the divine reading experience that is Instapaper for iPhone, this sets your page for maximum readability. Narrow columns help you read faster because your eyes never need to check where the next line starts.

Disables all style sheets, sets text to black on white Georgia in the default font size, forces a narrow column for readability, and specifies a comfortable line-height of 1.4em. It does not force <pre> or <code> elements to be in Georgia.

I wrote this first bookmarklet (or favelet) to make reading online as pleasurable as reading articles in Instapaper, the iPhone app that lets you read long web pages later. The second is a weaker byproduct of that effort.

(Updated 2009-05-04 to work better on pages with <iframe>s.)

Force Narrow Page §

Just tries to force the page to be narrow. Doesn’t work nearly as well as the “à la Instapaper” bookmarklet.

Subpxl §

Attempts to force subpixel anti-aliased text rendering (if your system allows it). This will often result in sharper, crisper, more readable text. (It will often also make text appear a little darker, which is probably a good thing for you, but is the reason a lot of so-called designers disable subpixel rendering on their websites. They want consistent, light rendering, usability be damned.)

aa (non-subpixel) §

The opposite: Prevents subpixel anti-aliased text rendering. I use this before taking a screen shot. Why? Because subpixel rendering is intended for your system and your screen only. It will make the edges of text (in your screen shots) look “colorful” on other screens or when the image is zoomed.

Grayscale §

Makes the entire page grayscale. This may be useful for making a screen recording that will be turned into a GIF, as the limited color palette demanded by GIFs means you can create a higher quality animation (with less visible banding/dithering) if you start with a limited-palette input, such as by avoiding all color. But maybe you want this for a different reason? Let me know!


April 29th, 2009. (Updated: September 30, 2016 at 4:22pm.)
Alan Hogan (@alanhogan).  Contact · About