Skip to content
A minimal typographic rehash of Wikipedia aimed at better screen readability.
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
imgs
README.md some more comments Oct 8, 2019
vector.rehash.css
vector.rehash.js
wikipedia.rehash.user.css
wikipedia.rehash.user.js

README.md

wikipedia.rehash

A minimal typographic rehash of Wikipedia, designed for screen readability. Currently very alpha and only tested on English Wikipedia pages.

rehashed wikipedia

Introduction

wikipedia.rehash is a UserCSS / UserScript combo adapted from a bookmarklet I wrote earlier to fix overly wide web pages like this. This issue is very common to websites designed before 2005(-ish), when 4:3 monitors are widely used.

This kind of no-margin layout probably looked okay back then, but overly wide paragraphs and tiny font sizes are unreadable on a HiDPI, 16:9 monitor commonly used today. Wikipedia is, unfortunately, one of the adopters of the no-margin layout.

I'm getting tired of fixing layout issues every time I open a Wikipedia article, so this project was born.

This project is still in the alpha stage. I might add more rules and options in the future when I encounter more problems. Pull requests are welcome.

Features

  • fix the line length issues of Wikipedia's default layout (note that the current line length is still probably wider than some recommended values to accommodate math formulas, code, floating boxes, etc.)
  • apply a more readable font size
  • (opinionated) change the body text font to a screen-readable serif (default is Charter) in order to better match math formulas
  • (opinionated) slightly lower the contrast ratio of body text
  • keep the vanilla look of Wikipedia, unlike some heavier redesign of Wikipedia. The goal of this project is to fix Wikipedia and be minimal, not to redesign it.

Installation

wikipedia.rehash consists of three parts:

1. CSS stylesheet

There are multiple ways to install this stylesheet. Pick any one of them.

Option 1: CSS Injection [Recommended]

I would recommend this approach because you can turn on/off the theme easily if you encounter any layout issues.

  1. You will have to first install a userstyles manager such as Stylus or Xstyle.
  2. Click here to install the stylesheet.

Option 2: Custom CSS [Recommended]

If you have a Wikipedia account, you can apply a global custom CSS stylesheet to your account. Go to Preferences > Appearance > Skin > Vector > Custom CSS (> Edit Source, if you already have a custom CSS). Copy-paste everything inside vector.rehash.css to the editor then click Publish page.

An example can be found here.

This stylesheet is not designed for mobile usage in mind but it works surprisingly well on my tablet. Using a custom CSS is probably the only way you can use the rehash on your mobile devices.

Option 3: userContent.css

If you are using Firefox, you can append the content of wikipedia.rehash.user.css to your userChrome.css file.

2. JavaScript [Optional]

Because Mediawiki's Popups extension dynamically computes the location of each pop-up window, I have to use some JavaScript code to dynamically adjust the pop-up window locations. This solution is not elegant. If you have a better solution, please let me know.

If you are not using the Popups extension (which can be turned off by Preferences > Appearance > Reading preferences > Page previews > Disable), you do not need to install the customized JavaScript file.

If you do think it's necessary to fix the issue of pop-up windows, pick either one of the following.

Option 1: JavaScript Injection [Recommended]

Still, you can turn on/off the theme easily if you encounter any layout issues.

  1. You will have to first install a userscript manager such as Greasemonkey (Firefox only) or Tampermonkey.
  2. Click here to install the userscript.

Option 2: Custom JavaScript [Recommended]

If you have a Wikipedia account, you can apply a global custom JavaScript to your account. Go to Preferences > Appearance > Skin > Vector > Custom JavaScript (> Edit Source, if you already have a custom JavaScript). Copy-paste everything inside vector.rehash.js to the editor then click Publish page.

An example can be found here.

3. Font

wikipedia.rehash will use Charter as the default body font. You can obtain a free copy of the font here. If Charter is not installed, the default serif font on your system will be used.

If you are using macOS or iOS, Charter is probably already preinstalled on your system.

I'm using Charter as the default font because it is free and relatively suitable for screen reading. However, the character set of Charter is fairly limited. You can switch to your favorite font by modifying the stylesheet.

Here are some other options:

  • FF Scala: I love the design of each character in this font, but it might be too thin for screen reading.
  • Freight Text: looks decent
  • Source Serif Pro (free)
  • Noto Serif (free): I'm using this as my default system serif font, it has a very large character set.
  • Linux Libertine (free): the font used in Wikipedia's logo, but still too thin for screen reading
  • Palatino: if you don't have other options
  • Georgia: still, if you don't have other options

Also, Said Achmiz compiled a list of “Screen serif” fonts. You can find more options in the blog post.

If you are using a different font, you will have to tweak the line spacing and font size yourself. You might find this to be useful.

If you have more suggestions for serif (or sans-serif) fonts suitable for screen reading, please let me know. I really want to explore more options.

More screenshots

Sample article: Riemann sphere

Please compare the images in full-screen mode for better visibility.

Before

plain wikipedia

After rehash [Desktop]

wikipedia.rehash

After rehash [Tablet]

wikipedia.rehash

Further readings

If you want to know more about the design principles, here are some further readings.

(Maybe) related projects

Some alternatives to try if you want a more elaborated redesign.

License

wikipedia.rehash is licensed under CC-BY-NC 4.0. (c) 2019 Krasjet

Please do not use this project for commercial purposes without my consent.

You can’t perform that action at this time.