Creating a more readable Wikipedia
by Molly White on
Happy New Year! This time around, the change of the year brings more than fireworks and months of forgetting to write “2014”: it brings the beginning of my two-year term on Wikipedia’s Arbitration Committee. This page describes describes the Committee as:
The Arbitration Committee is the panel of editors responsible for conducting the Wikipedia arbitration process. It has the authority to impose binding solutions to disputes between editors, primarily for serious conduct disputes the community has been unable to resolve. The arbitration policy describes the Committee’s roles and responsibilities in greater detail.
At some point I should probably blog about why becoming an Arbitrator was interesting to me, why I decided to run, and all that. But for now I’m going to write about something more tangentially related.
The first thing I noticed when I was elected to the Committee two weeks ago was the massive amount of reading that this position entails. Even though I didn’t take my seat on Arbcom until today, we were subscribed to the mailing lists more or less immediately (all five of them, plus the three functionary lists). My inbox, normally idling between one and five emails a day, was suddenly overflowing with them. Beyond emails, I had some serious catching up to do. Dispute resolution and arbitration cases were never my particular niche in Wikipedia, so I have spent the last two weeks working to familiarize myself with them. This has meant a lot of reading over old cases and reading through the arbitration policies. Furthermore, it was evident that the two open cases would not be closed before I was seated, so I chose to become active there as well.
I was working on reading through one of the current arbitration cases, but was frustrated with trying to focus on the type itself. Wikipedia, with its 10pt font, does a good job of displaying large amounts of information in small amounts of space. It does a poor job of allowing you to read said information, particularly in such large quantities, without your eyes glazing over. As you can probably tell, from the font sizes both on this blog and my website, I’m very pleased to see that large type and wide line spacing is coming into style. I find it much easier focus when I’m not squinting to read large type, or daunted by the dense block of text in front of me. With this in mind, I remembered Readability, a platform that reformats any webpage into an easy-to-read style. It removes parts of the page it finds to be extraneous: sidebars, logos, navigation, and overzealous formatting. It increases the font size and line spacing significantly, and sets all the content in the delightful Sentinel slab serif.
I installed the Firefox extension, and excitedly tried out my first page. It was beautiful! Reading through one of the Arbitration cases was a breeze. It wasn’t long before I started to run into issues, though. For one, clicking on anchor links to other parts of the same page (for example, links in the table of contents) reloaded the original page. But more of an issue was the loading time. Loading the Kafziel arbitration case, an 80kB page, took 12.46 seconds. This felt long, but was manageable. However, when I went to load one of the 1373kB archive pages of Administrators’ noticeboard/Incidents, I waited 80 seconds. I’m not entirely sure what it is that actually takes 80 seconds—presumably uploading the page to their servers and then attempting to parse out the content that it thinks I’m actually trying to read. This seemed excessive, though, and I realized that I could probably pretty easily accomplish a similar result just using some custom CSS.
An hour later, I had added a button to my top toolbar on Wikipedia. When I click it, it toggles the
easyreader class on the
<html> tag, and all of my styles are applied. I tried to be relatively comprehensive about which elements I styled, although I realize that I will probably stumble across oddly-formatted components and need to tweak it as I go. However, an hour’s work for the satisfaction of clicking a button and instantaneously seeing a more readable Wikipedia page was completely worth it. The anchor link issue is also fixed with this approach. Take a look at the following comparison screenshots to see how it turned out! If you want to use the JS/CSS yourself, you can get the files here. I should note that these are only meant to work with Wikipedia’s default Vector skin—those of you using different skins would have to do some serious tweaking.