Greasemonkey Hacks

Hack #75. Add a Text-Sizing Toolbar to Web Forms

Insert buttons before <textarea> elements to make the text larger or smaller.

I spend a lot of time—probably too much time—commenting on weblogs and web-based discussion forums. Despite several attempts to create some sort of universal commenting API, virtually all of these sites continue to use a simple web form with a <textarea> element for entering comments.

This hack alters web forms to add a toolbar above every <textarea> element. The toolbar lets you increase or decrease the text size of the <textarea>, without changing the style of the rest of the page. The buttons are fully keyboard-accessible; you can tab to them and press Enter instead of clicking them with your mouse.

Tip

I mention this up front, because accessibility matters, and also because it was harder than it sounds.

The Code

This user script runs on all pages. The code looks complicated, and it is complicated, but not for the reason you think. It looks complicated because of the large multiline gibberish-looking strings in the middle of it. Those are data: URIs, which look like hell but are easy to generate.(See "Embed Graphics in a User Script" [Hack #11] for more on data: URIs.)

The toolbar is displayed visually as a row of buttons, but each button is really just an image of something that looks pushable, wrapped in a link that executes one of our JavaScript functions. Since we'll be creating more than one button (this script has only two, but you could easily extend ...