I made a couple of bookmarklets to scratch itches in the way of hard to read web pages (Yeah, I know white ninja is meant to be like that. Doesn’t make the text any easier to read on a laptop with masses of glare.)

Readable width

According to some publisher type’s research, 30ems is near most people’s optimal line width for reading. This bookmarklet is used by clicking on some text that’s too wide, then clicking again and again until it works. (UI design award, Powerpoint applause)

javascript:t=true;d=document;a=addEventListener;r=removeEventListener;n='click';v='keypress';s='30em';b='white';p=d.createElement('p');q=p.style;q.position='fixed';q.top='42%';q.left='32%';q.width='36%';q.height='16%';q.border='1px black solid';q.backgroundColor=b;q.color='black';q.padding='0.5em';q.textAlign='center';p.innerHTML='Click a block of text until as much of the page as you want is a readable width. Then ctrl-click if you want it centred. Press esc to finish.';d.body.appendChild(p);h=function(e){if(e.ctrlKey){c(e.target)}else{m(e.target)}};a(n,h,t);f=function(e){if(e.keyCode==27){r(n,h,t);r(v,f,t);p.parentNode.removeChild(p);clearInterval(o)}};a(v,f,t);m=function(e){u=e.style;if(e.parentNode.style!=undefined){if(u.width==s){m(e.parentNode)}else{u.width=s}}};c=function(e){z=e.parentNode;if(z.style!=undefined){if(z.style.width==s){c(z)}else{e.style.margin='0 auto'}}};void(o=setInterval(function(){if(q.backgroundColor==b){q.backgroundColor='yellow'}else{q.backgroundColor=b}},1500))


Black text

Click some of that grey text that designers like to use to try and get a more ‘anti-aliased look’ according to some article or other (yes, this design is guilty of that too) to get it to #000, the way some figure I can use to pretend I have a fundamental views on the subject intended.

javascript:t=true;d=document;c='click';g=getComputedStyle;b='white';p=d.createElement('p');q=p.style;q.position='fixed';q.top='42%';q.left='32%';q.width='36%';q.height='16%';q.border='1px black solid';q.backgroundColor=b;q.color='black';q.padding='0.5em';q.textAlign='center';p.innerHTML='Click a block of wimpy grey text to turn all text that colour a nice, readable black.';d.body.appendChild(p);h=function(e){c=g(e.target,'').getPropertyCSSValue('color').cssText;n=d.getElementsByTagName('*');for(i=0;i


Oh and there is no pre-compression versions. I started tweaking whitespace impaired versions like an idiot. Some excuse for being crappy.

Woo? (Powerpoint applause)

As far as I can see setting the priority in which plugins handle a piece of media when more than one plugin is capable of doing so in firefox is undocumented and there is no way to do so at about:plugins. This was rather irritating as the gxine starter plugin is nowhere nearly as good as the totem plugin, yet it handles more mime types. So it would make a great backup plugin. So how is priority determined? Simple, the most recent plugins are used in preference to older ones, again this isn’t documented.

So, in *nix all you should have to do is open up a terminal window and type:
cd /usr/lib/firefox/plugins
sudo touch -d 01/01/95 <lower priority plugin>
In my case <lower priority plugin> was gxineplugin.so.

In windows you can download eXpress TimeStamp Toucher, open it and choose an old date and browse to the lower priority plugin which should be in C:/Program Files/Mozilla Firefox/Plugins/ by default.

You can confirm that it has worked by going to about:plugins in firefox and making sure your lower priority plugin is at the furthest down the page of the plugins.

Comment and let me know if this works for you too.