Adventures in bookmarklet land

Do you use bookmarklets? They're little bits of javascript that you save as bookmarks, that do something to the page you're on when you click on them. Today I made a bookmarklet to change the formatting on any Project Gutenberg HTML book.

To see it in action, drag this link to your bookmarks bar: Format Gutenberg - then go to any Project Gutenberg book as an HTML page - try this one to begin with - then scroll down to the main text and click on your bookmarklet.

A bit of background:

I read and wrote a lot of fanfiction as a teenager, and (I suppose largely out of nostalgia) have some particular preferences about text formatting. Nowadays, I find 13px Verdana on a white background, with minimal margins and no indenting, to be the easiest to concentrate on. People talk a lot about how it's difficult to read from a computer screen (hence the rise of e-ink) but personally I suspect it's easier for me to read fiction when it's just another tab on my browser. Project Gutenberg is a massive online library of out-of-copyright literature.

I'm moving house this weekend, my exams start this Wednesday and in general, I'm pretty stressed out. I'm having a quiet evening watching comedy with my brother Pete and, as usual when I'm under pressure, obsessively coding. I've always thought bookmarklets were pretty cool (if fairly mysterious), so I had a look at some source code and had a go at working it out (I'm sure there are lots of tutorials on the internet, but I was looking for a puzzle).

My general strategy and some code:

Essentially, the style I wanted could be achieved by applying the following CSS to the page:

body{margin-right:21px;
margin-left:21px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:13px;
text-align:left;}
p{text-indent:0px}

Now, all the CSS on the Project Gutenberg HTML pages is inline, so what I needed to do was find the pair of <style> tags and append my code to their contents. Enter some javascript.

var r=document.getElementsByTagName('style')[0];

This finds the first style tag pair (number 0). I can access its contents using the "innerHTML" property, but I can't change it without erasing it*. So I must copy it over into a variable to keep it.

var s=r.innerHTML;

I created another variable called "q" with my CSS inside it, and now we are done with all this tedious variable business and can get on to the real action: replacing the original CSS inside the <style> tags with itself plus my addendum. This is placed inside a function (which is rather elegantly named nothing whatsoever), which is then executed by a simple pair of brackets.

(function()
{r.innerHTML=s+q;})
();

So, in its entirety, we have:

javascript: 
var r=document.getElementsByTagName('style')[0];
var s=r.innerHTML; var q='body{margin-right:21px; margin-left:21px; font-family:verdana,arial,helvetica,sans-serif;
font-size:13px; text-align:left;} p{text-indent:0px}';
(function()
{r.innerHTML=s+q;})
();

However, we can't have spaces inside a bookmark - so the unnecessary spaces are removed, and the necessary spaces (after the word "var") are replaced with "%20", which means essentially the same thing to your browser. This was my first stumbling block when trying to decipher other people's code: it's so difficult to read without spaces!

javascript:var%20r=document.getElementsByTagName('style')[0];var%20s=r.innerHTML;var%20q='body{margin-right:21px;margin-left:21px;font-family:verdana,arial,helvetica,sans-serif;font-size:13px;text-align:left;}p{text-indent:0px}';(function(){r.innerHTML=s+q;})();

And there we go. A brief evening of minor obsession, and now I can read proper literature while I pretend it's fanfiction.

*Incidentally I know precious little Javascript, but the W3Schools website was very helpful.