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!

Font name? §

A tool for web design & development, this bookmarklet reads what font stack the currently selected text — or body, if none — of the current web page has and guesses which font (or generic font keyword, such as sans-serif or the much newer system-ui) in the stack is actually being used. Note that the font stack is read via JavaScript, not CSS, so the value can change in at least one case. A font stack that uses BlinkMacSystemFont in CSS will report it as system-ui via this bookmarklet in Chrome. Thank you to Lalit Patel for sharing his useful font-detection script, which is foundational to this bookmarklet. This is version 2.0, which added support for examining the currently selected text. Source

Font stack? §

This bookmarklet is the same as the above, but with extra information about the font stack. Note that it only detects fonts using the string mmmmmmmmmlli, which means detection for any fonts except Latin ones will fail. This is version 2.0, which added support for examining the currently selected text.

Kill GIFs §

Replaces most GIFs on the page with a placeholder image. A blunt instrument tool that axes potentially troublesome animation. Version 1.0. Source

→Markdown §

For those who write with Markdown, this bookmarklet uses the wonderful to turn your selection, or the entire page, into Markdown-formatted text. Delightfully, it strips out the non-content parts of the page (such as navigation, sidebars, and footers). It’s not perfect (and it ironically bombs on this page), but it can be quite useful to turn your writing into Markdown, or to quote part of a page in your own blog post. Version 1.0. Source


April 29th, 2009. (Updated: April 05, 2017 at 8:42pm.)
Alan Hogan (@alanhogan).  Contact · About