A Bookmarklet to Fix Wikipedia’s Layout in a Wide Browser Window

I have a wide monitor and I like my windows to be maximised (I’m on Windows 7). I also like when Chrome is maximised, because I usually have about 7,623 tabs open at any given time, so the bigger the window, the better.

Thus, when I visit a page on Wikipedia, it’s unreadable — because Wikipedia’s layout is fluid and it fills the whole monitor. It normally looks like this:

Instead of resizing my browser window each time, I created a JavaScript bookmarklet that fixes the problem on WikiPedia’s layout. The basic JavaScript is as follows:

(function(){
  var myBody = document.getElementsByTagName('body')[0];
  var myBodyWidth = myBody.style.width;

  if (myBody.className.indexOf('mediawiki') !== -1) {
    if (!myBodyWidth || myBodyWidth === 'auto' || myBodyWidth === 'inherit') {
      myBody.style.width = '1050px';
      myBody.style.marginLeft = 'auto';
      myBody.style.marginRight = 'auto';
      myBody.style.position = 'relative';
      myBody.style.cssFloat = 'none';
    } else {
      myBody.style.width = 'auto';
      myBody.style.position = 'static';
    }
  }
})();

The function that’s run will toggle the width. So if it’s too wide, it will bring it down to 1050px (you can change it to your own value if you want); if it’s not wide, then it sets the width to “auto”. I can’t say it’s totally future proof, because if Wikipedia changes their CSS, this could make the page worse. But I think it’s pretty safe, at least for a while.

Basically, it looks for a class name of “mediawiki” on the body element (which seems to exist on any article page on Wikipedia). Once that’s found, it then checks to see the status of the width of the body; if it’s not set or is set to “auto”, then it fixes it at 1050px, and adds “position:relative” to fix some absolutely positioned sidebar stuff. The “else” part of the code will bring the width and position of the body element back to normal. The “float: none;” is not really necessary on Wikipedia, but might be necessary if you alter the code for other sites (see below).

UPDATE: It should also be noted that “myBody.style.cssFloat” (if I remember correctly) will not work in IE6 and IE7, so if you need that line to work in those browsers (which I doubt you do), then change it to “myBody.style.styleFloat”.

So if you have the same pet peeve as I do when viewing pages on Wikipedia, here’s a link that you can drag to your bookmarks bar:

Fix Wiki Width (Drag this link to your bookmarks bar)

Then, just visit any page on Wikipedia, click the button, and the page will look like this:

The concept would work on any site that has a fluid width. For example, here’s an adjusted bookmarklet that should fix most fluid-width sites:

Fix Fluid Width (Drag this link to your bookmarks bar)

It Only Reads Inline Styles

Take note that the style object in JavaScript (which I’m using in this script) only reads inline styles, not styles set in a styesheet. You could alternatively link to jQuery within the bookmarklet and use jQuery to read the styles properly, or you could include a function to get the true styles. But for the purpose of this simple bookmarklet, I don’t think it’s necessary.

But be aware that if there are unusual values in customary CSS on the affected properties, those properties will not be toggled back to their original values. “width” and “position” are actually the only values that will potentially get refreshed to their original state.

Maybe at a later date, I’ll update this to include Robert Nyman’s style function, or a jQuery-based solution. But for now this will do.

On a related note: if you’re interested, Siddharth from Nettuts wrote a nice article on creating bookmarklets.

Let me know if you see any bugs or have any overall recommendations for the code.