Taming the horrid wide Web

2007-02-27 06:21:00

If you spend any time at all reading stuff online, you frequently run into Web pages whose stylesheets don't constrain the width of the text on the page.

At least until we get CSS3 multi-column support in all the mainstream browsers, doing a multi-column layout is (to quote our esteemed president here in the US) really hard work. Most people can't be bothered to do fancy layout stuff, and when you have a big monitor, the end result is ridiculously wide swaths of text that sprawl all the way across the browser window.

People argue about the optimal column width for readability, but everyone agrees that there is some limit (bonus irony points that the article linked here uses an excessively wide fixed width).

I know about how much my eyes can stand -- eventually I get lost going back to the left-hand side for the next line of text, so I finally sat down and did something I should have done long ago -- made myself a bookmarklet that forces a Web page to a certain width.

It looks like this:

  var d = document;
  var s = d.createElement("style");
  s.setAttribute("type", "text/css");
  var h = d.getElementsByTagName("head")[0];
  'h1,h2,h3,h4,h5,h6,p,ul,ol,dir,menu,' +
    'hr,dl,table,tbody' +

It just appends an inline style to the page, and forces the width of all block-level elements to 580px -- using an !important rule to override any styles that may be already set directly on elements.

Of course any !important rules set right on page elements could potentially be a buzzkill here, also cases where the page author has done weird stuff like mutating normally inline elements like span to be display: block.

Strip out all the linebreaks and spaces above (also the concat action going with the long string for the CSS rule), drop it in a bookmark, and you're good to go. Your eyes will thank you.


mde (2007-03-02)
Good stuff, guys. Thanks for the commentary. I guess the point -- fixed versus liquid width aside -- is being able to have enough control over the layout to make it readable for you. Thank goodness for modern, scriptable/extensible user-agents.

Stoyan (2007-02-27)

Thanks for sharing this!

Some time ago I found the joy of using an "edit page" bookmarklet from squarefree.com, helped me fix a page on Paul Graham site which to me suffered from the opposite - text too narrow for printing, described here.

Oh, and while I'm here - I loved your book! (posted a review on Amazon)

Reid (2007-02-27)
I couldn't agree less, I'm afraid. Liquid (non-fixed column width) layouts are much better simply for the reason that I'm tired of small ribbons of text lost in huge swaths of colour. This is especially exacerbated since I favour high resolution modes and then use the browsers ability to increase text size, thus getting an absurdly small word count in each line. Alas, this seems to be an age-old debate; I expect it to come to the fore when much higher resolution displays start making a major appearance. e.g. 300 dpi monitors that have been promised in the next few years. That will put paid to the notion of fixed-width columns once and for all. Font-based sizes will out I suspect.

bear (2007-02-27)
Nice hack - simple and direct for sure :) Have you seen the Firefox add-on Stylish? http://userstyles.org/ I use it in small ways to do what you just described and since it can be set to load certain hacks per page or domain it happens auto-magically :)


This is the blog for Matthew Eernisse. I currently work at Yammer as a developer, working mostly with JavaScript. All opinions expressed here are my own, not my employer's.


Previous posts

All previous posts ยป

This blog is a GeddyJS application.