Make Columns Narrower with GreaseMonkey or Stylish

It is hard to read a lot of text in a wide browser window, so below are two GreaseMonkey scripts to make the text columns narrower. They both work by changing an element's CSS width to a percentage of the window width.

If the text is within a known element tag (e.g. p), try the following script, which iterates through the collection of elements and sets the elements CSS width.

for each (e in document.getElementsByTagName('p')) {
  e.style.width = '60%';
}

If all the text is all within a single containing element, such as the body element, then the script can be shortened to …

document.getElementsByTagName('body')[0].style.width = '60%';.

If you want to also centre the text in the window, just change move the left margin by adding e.style.marginLeft = '20%';. marginLeft is the Javascript equivalent of CSS' margin-left property.

Later … I realised that since we're only changing CSS properties, it's a lot easier to use the Stylish add-in. Just add a style sheet like this:

  body {
    margin-left : 20%;
    width : 60%;
  }

See also

• (28-Nov-2008) Theme a Site with GreaseMonkey and Stylish