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)