Visual Rhetoric Controls Greasemonkey scripts for manipulating web pages

In the spring of 2008, Kristen Flory and I studied visual rhetoric with Danielle Devoss at Michigan State University. Part of our work became a presentation on the rhetorical use of color and typography in presidential-candidate web pages for the 2008 Watson conference .

For that presentation, I created a couple of Greasemonkey scripts, Javascript applets that are injected into web pages by the Greasemonkey extension for Firefox. Those scripts let us interactively examine and alter the fonts and colors used on the pages. They have limited (and rather arbitrary) functionality, and they're mostly a curiosity; but they do demonstrate a bit of how readers of digital media such as web pages can take control of that experience and intervene in the rendering process. So I'm making them available here.

Greasemonkey

Greasemonkey is an add-on for the Firefox web browser. It probably works with some of the other Mozilla-based browsers, too. Don't use Firefox? Well, ya should. Get it first.

Once you have Firefox, get the Greasemonkey extension. Just follow the instructions on the page to install it.

Greasemonkey does one, conceptually simple thing: it adds programs to web pages. You install "user scripts" into Greasemonkey. Then, whenever you load a web page in Firefox, Greasemonkey will add those scripts to the page. The scripts can do anything Javascript does, just as if they were part of the page to begin with: change the page's contents or formatting, add new controls, etc. There are scripts to block ads, to rearrange the contents of popular sites, to keep a history of what you've viewed in Wikipedia — and lots of things you'd never think of. Some scripts do their thing silently; others, like the ones I'm providing here, add controls to the page to let you do things to it.

Even if you've never written a line of Javascript, you should try Greasemonkey. The userscripts.org site has thousands of scripts (over 23,000 as of this writing). It's searchable and provides forums for script authors and users.

Of course, Greasemonkey can be disabled if you think it might be causing problems on a page, and you can choose which pages each script runs on. It also lets you view and edit scripts — and lots of Greasemonkey scripters get their start tweaking someone else's scripts. Give up passive "browsing" and enter the world of web hacking.

The Visual Rhetoric Scripts

I've provided two of my Greasemonkey scripts here. These are the scripts I used for the demonstrations in our Watson presentation. One lets you do some things with fonts on a web page; the other one operates on colors. There's no grand scheme behind what they do — it's whatever I thought might be neat to do for the demo and had time to implement. Changes will be more striking on some pages than on others.

These scripts are intended more to prompt discussion than to do anything substantial in terms of visual-rhetoric analysis, but they're interesting to play around with. And they're designed to make it convenient to add new functions, if you're a Javascript programmer.

If you're reading this page with Firefox and you have Greasemonkey installed, you can click on the links below to install the scripts. When the scripts are installed (by default, they run on all pages; you can change that using the Greasemonkey options dialog), when a page loads the words "Visual Rhetoric Controls" will appear at the top. Click it to open the controls area at the top of the page; click it again to close the controls area.

By the way, if you've mucked up a page using these scripts and you want to get it back to the original, just refresh it. The changes aren't saved in any way.

Color Coordinator

Color Coordinator lets you examine and play with the colors specified by the page's styles (CSS). It doesn't affect images (with one exception: the "Darken" function removes background images, so that backgrounds can be made darker) or other embedded media, just things rendered with color styles. It provides these functions:

Palette
List the colors on the page.
RedIsBlue
For each color on the page, swap the red and blue components.
Redden
For each color on the page, increase the red component to 100%. This saturates pastel reds, turns blues purple, makes greens yellow, makes black red, etc. It has no effect on saturated reds and white, of course.
Pastel
Decreases the saturation of chromatic colors on the page. (In this version, it might decrease it a bit much; the results are often pretty gray.)
Darken
Makes all the colors darker. Also removes background images.

Type Reset

Type Reset provides tools for examining and changing fonts on a page. In this version, it has two kinds of operations: changing fonts, and scrambling text to make it unreadable. Why? Because it's easier to analyze a typeface when you can't read — and be distracted by — the content. (This idea comes from design theory; Kristen could give you the details.) Type Reset provides these functions:

Rot-13
Scramble text using the rotate-by-thirteen substitution. This changes A to M, B to N, and so on; letters from M on up become A through L. (Only the letters in the English alphabet are affected.) Rot-13 is self-inverting: if you do it twice, you get the original text back. (Rot-13 is a popular way to scramble text in some new-media forums, such as Usenet, where it's often used to hide a joke's punchline, for example. Most Usenet clients have a command to rot-13 text.)
P's and q's
You can mind them by clicking this button, which turns every capital letter to a P and every lowercase letter to a q. Well, it amused us.
Scramble
Like Rot-13, this is a substitution (though it's not self-inverting). The substituted letters were chosen for having simliar letterforms in most typefaces: letters with descenders are replaced with other letters with descenders, and so on. With Scramble, you can't read the text, but its appearance and flow doesn't change too much.
List Fonts
Lists the fonts on the page. This actually lists the fonts specified by the stylesheet. There's no guarantee that Firefox on your machine actually has the specified fonts. So styles typically specify a list of fonts, and the browser will use the first one in the list that it has. (If none of them work, the browser will substitute its default font.) So List Fonts lists the fonts as they're specified, and you can see how your browser renders that font list.
Serif and Sans-Serif
Set all fonts to "serif" or "sans-serif". This will tell Firefox to use its default serif or sans-serif font.
Set all fonts / headers / main text to...
Set fonts on the page to the specified font. Enter the name of a font you have installed (like "Arial" or "Edwardian Script ITC") in the text box, then click one of the three buttons. (The font name must be entered just as it appears in your system's list of fonts.)

Clicking the "all fonts" button sets all fonts to the specified font.

Clicking "headers" sets the font for HTML elements <h1> through <h6>, plus <dt>, <caption>, and <label>. Note that some designers put header text in other elements, so this doesn't always do what you want.

Clicking "main text" sets the font for HTML elements <div>, <p>, <address>, <a>, <q>, <dd>, <li>, <sub>, <sup>, <span>, and <td>. That usually gets most of the text that's not a header or other sort of label.

Note that many designers use images for some text elements, such as logos, headings, and navigation links. (They ought to use sIFR, but many don't know that. Anyway, Type Reset currently doesn't alter sIFR'd text either.) Type Reset is mostly useful for body text, or for sites that use real text exclusively.

If you find yourself using Type Reset to play with fonts on a page, I recommend installing some crazy free fonts — there are hundreds, maybe thousands, available on the web — so you can produce dramatic font changes. The Teenage Girl fonts are a good choice. Remember to specify the font name exactly when you use the font-setting tools, or you'll just get your browser's default font.

Windows users might want to try installing a free tool like FontViewOK to display the fonts they have installed.

The Code

One of these days I may get around to putting up a page that explains how the scripts work. For now, though, the curious can look at the script sources and email any questions to me.