CodeinWP CodeinWP

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:

Wikipedia is too wide when the window is maximised

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:

Wikipedia fixed

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.

12 Responses

  1. bfred.it says:

    I’ve been using this and I LOVE it. http://userstyles.org/styles/18282/minimalist-wikipedia-sans
    I had to edit it so that it’s compatible with all Wikipedia languages and not just with the English version. The only thing I can complain about is the fact that it hides the languages on the left and the [edit] links, but I can still use them if I hit “esc” multiple times before the style loads. :P I know, it’s a pain, but it hurts much less than using the standard version.

  2. Adam Amran says:

    Would it be possible to make a browser plugin (Chrome &/or Firefox) out of this? I think many people would appreciate it. For example I do not really want it to be in my bookmarks bar because it’s a place where I need to have more important things, but I’d still like to have use this great script.

  3. Hoang says:

    You always have 7,623 tabs open at any given time? I think it’s weird if not insane.

  4. Kevin Turner says:

    I just found it funny that of all the Wikipedia articles you could have chosen for your screen caps, you picked Bea Arthur’s page.

    Great site, btw.

  5. threedot says:

    There aren’t any problems on Wikipedia’s layout. It is a feature.

    You can reach zoom page for well reading on big screen resolutions.

  6. Ryan says:

    Just wanna say thank you. It works so great in Safari and enabled me to use smart zoom again to save my sights.
    Thank you!

  7. DZ says:

    Yea, I wish there was a Chrome extension for this.

    Thank You anyway!

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field and deep URLs are not allowed in the "Website" field. If you use keywords or deep URLs, your comment or URL will be removed. No foul language, please. Thank you for cooperating.

Markdown in use! Use `backticks` for inline code snippets and triple backticks at start and end for code blocks. You can also indent a code block four spaces. And no need to escape HTML, just type it correctly but make sure it's inside code delimeters (backticks or triple backticks).