Bookmarklets

Also known as “favelets,” bookmarklets are scripts that affect the current page you are viewing.

These are some I have created or customized over the years. 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 Chrome extensions 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.) This is version 2.0, which should work on more sites in more browsers (such as on GitHub in Safari). Last updated March 2018.

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. (Version 2.0)

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.1 (July 2022). 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.1 (July 2022).

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 heckyesmarkdown.com 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

Mark Visited Links §

A lot of designers seem to think it’s best to style visited and unvisited links the same. But sometimes, and for some people, it’s astoundingly useful to tell them apart. This bookmarklet forces all links to be blue when unvisited and plum when visited. Due to browser privacy protections, color is the only differentiator possible. To guard against problematic backgrounds, this bookmarklet also gives links a white text-shadow. Results may not be pretty, but they should be useful! This can’t work 100% of the time, but feel free to let me know about when it fails, if you’d like. Version 1.2. Source

Show Linked Media In-Page §

This bookmarklet attempts to find any links to images and videos on the page, based on the extension of the linked URL, and then show that image or video right in the current page, saving you clicks. It can't work when the links go to web pages instead of directly to the media. Want to try it out? Run the bookmarklet instead of clicking this link to look at this starflower. Version 1.0. Source

Funky Focus §

This bookmarklet tries to force a light orange ring around the currently focused element. For many focused elements, it will also shift the colors, slightly boost the brightness, and periodically wiggle the element. Version 1.0. Source

Force System Fonts §

This bookmarklet attempts to force the page to use system fonts (the same fonts your operating system uses for its user interface). Or, edit it to use your favorite font instead of system-ui (the system fonts keyword). Version 1.2. Source

PIP §

Clicking this bookmarklet will show the first video on the page in picture-in-picture mode. Clicking it more times will cycle through all the other videos on the page, if applicable; if there is only one, the second click will exit PIP mode. Limitations: Does not work with iframes currently. Version 1.1.1. Source

Add Custom CSS §

Adds CSS to the current page. Version 1.1. Source

Remove Custom CSS §

Removes any custom CSS previouly added via the Add Custom CSS bookmarklet. Version 1.0. Source

Edit Webpage §

Adds the contentEditable and designMode properties to the entire web page, allowing you to type in the page as if you are in a word processor (in most browsers). Version 1.0. Source