The "Read" Bookmarklet

Every once in a while, I open a page that I want to read, and it looks like this:

wide-page.png

No max-width and small font-size, which makes it unreadable.

To fix this, I’ve created a really tiny bookmarklet which narrows the page and proportionally enlarges the font size, so it looks like this:

narrow-page.png

The code:

1
2
3
4
5
6
7
8
javascript:(function() {
  var b = document.getElementsByTagName('body')[0];
  b.style.width = '40em';
  b.style.background = 'white';
  b.style.fontSize = '1.2em';
  b.style.marginLeft = 'auto';
  b.style.marginRight = 'auto';
})()

If you want to try it out, just create a new Bookmark, then paste the code above in the URL field.