Friday, July 08, 2011

Reading #Wikipedia in columns

When you have a big screen, reading a Wikipedia article like the one on Gandhi becomes a pain. The head must move all the time, the letters are small. Not good.


A small CSS trick allows you to read the article in multiple columns. This is only for modern browsers ... even IE9 does not qualify ... As it is only four lines, I present to you the Firefox version.
Firebug -> Console -> Paste the below script

$("#bodyContent").css("-moz-column-count", 2);
$("#bodyContent").css("-moz-column-width", "400px");
$("#bodyContent").css("-moz-column-gap", "20px");
$("#bodyContent").css("-moz-column-rule", "2px solid black");

Then click on Run.
Thanks,
       GerardM

3 comments:

Bawolff said...

Well the -moz- part of those rules especially exclude other browsers. Safari 3 and later support it with the -webkit- prefix.

Magnus said...

-webkit prefix also works for Google Chrome.


For permanent multi-column goodness, go to
http://en.wikipedia.org/wiki/Special:Mypage/vector.css
and enter:

#bodyContent {
-moz-column-count:2;
-moz-column-width:400px;
-moz-column-gap:20px;
-moz-column-rule:2px solid black;

-webkit-column-count:2;
-webkit-column-width:400px;
-webkit-column-gap:20px;
-webkit-column-rule:2px solid black;
}

Magnus said...

And when wou wrap the whole CSS in

@media only screen and (min-width: 1600px) {
}

it will only show two columns on wide screens.