wikipedia.rehash a minimal typographical rehash of Wikipedia, specifically designed for screen readability. It's currently very alpha and only tested on English, Japanese, and Chinese Wikipedia pages, but it will probably work under most languages.
If you just want to try out wikipedia.rehash, you can install it by
- Install Stylus, then click here to install the UserCSS.
- Install Tampermonkey, then click here to install the UserScript (The UserScript is optional. It's a hack to fix a slight annoyance).
- If you are not on iOS or macOS, install Charter, or use another typeface you like.
- Open up a Wikipedia article, e.g. Wikipedia.
- Read the source code and customize it to your liking, or uninstall it if you don't like what you see.
If you don't want to use extensions, there are alternative options for each step, see Installations for details. The source code is intended to be read and customized.
wikipedia.rehash is adapted from a bookmarklet I wrote earlier to fix overly wide web pages. This issue is very common in websites designed before 2005(-ish), when 4:3 monitors were widely used.
Such full-width layout probably looked fine back then, but the overly wide paragraphs and the tiny font size are unreadable on a HiDPI, 16:9 monitor commonly used today. Wikipedia is, unfortunately, one of the adopters of such layout.
It is ridiculously easy to fix this issue, just set a maximum width to the
body tag, then set the margin to auto.
body {
max-width: 750px;
margin: auto;
}This is essentially the basis of my resize bookmarklet. I won't fix all websites, but hopefully most of them.
We will use Jim McCann's "Writing Stupid Code" as an example. Here is how it looks on a 16:9 screen.
and here is how it looks after applying the resize bookmarklet. It's not perfect, but at least it is readable to me now.
I'm getting tired of fixing layout issues every time I open up a Wikipedia article, so wikipedia.rehash was born.
Of course, fixing Wikipedia won't be as simple as 4 lines of code, but it would neither take near 20000 lines of CSS. The source code of the UserCSS is less than 200 lines, including comments, and it can be reduced further if you don't care about details.
I don't want to alter the vanilla look of Wikipedia, so the minimal code base is rather intentional. The goal is to fix Wikipedia, not to redesign it.
Currently, the stylesheet will
- Fix the line width issues of Wikipedia's default layout (Note that the new line width is still wider than usual to accommodate formulas, code, floating boxes, etc.).
- Apply a more readable font size.
- (Opinionated) Enable hyphenation in body text. This requires Firefox, Safari, or legacy Edge. Chromium based browsers don't support auto hyphenation on Linux and Windows.
- (Opinionated) Change the body text typeface to a screen-readable serif to better match math formulas. The default typeface is Charter for Latin characters and 明朝体 / 明體 / 宋体 system fonts for Japanese and Chinese.
- (Opinionated) Slightly lower the contrast ratio of body text.
Do notice that wikipedia.rehash is still very alpha. I might add some additional rules and options in the future when I get annoyed. The stylesheet is commented and very simple. You are free to disabled any of the changes listed above.
Send me a pull request on GitHub if you have any suggestions.
The recommended way to install wikipedia.rehash is introduced in the first section, but there are other options you don't want to pollute your browser with extensions.
Note that wikipedia.rehash consists of three parts:
There are multiple ways to install the stylesheet. Pick any one of them.
I would recommend this approach because you can turn on/off the theme easily if you encounter any layout issues.
- First install a userstyles manager such as Stylus or Xstyle.
- Click here to install the stylesheet.
If you have a Wikipedia account, you can apply a global custom CSS stylesheet specific to your account.
First log in your Wikipedia account, then go to
Preferences > Appearance > Skin > Vector > Custom CSS
If you already have a custom CSS, you also need to click Edit Source.
Copy-paste everything inside vector.rehash.css to the editor
then click Publish page.
An example can be found here.
The stylesheet is not designed to be used on mobile devices in mind, but it works surprisingly well on my tablet. Using a custom CSS theme is probably the only way you can use the rehash on your mobile devices.
If you are using Firefox, you can append the content of
wikipedia.rehash.user.css to your userChrome.css
file, but you won't have the option to turn it off easily.
Because Mediawiki's Popups extension computes the location of each pop-up window dynamically, 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 don't need to install the customized JavaScript file, but if you do think it's necessary to fix the pop-up window issue, pick either one of the following.
Still, you can turn on/off the theme easily if you encounter any layout issues.
- First install a userscript manager such as Greasemonkey (Firefox only) or Tampermonkey.
- Click here to install the userscript.
If you have a Wikipedia account, you can apply a global custom JavaScript specific to your account.
First log in your Wikipedia account, then go to
Preferences > Appearance > Skin > Vector > Custom JavaScript
If you already have a custom JavaScript, you also need to click Edit
Source. Copy-paste everything inside vector.rehash.js to the
editor then click Publish page.
An example can be found here.
wikipedia.rehash will use Charter as the default Latin body text font. You can obtain a free copy of Bitstream Charter here. If you are using macOS or iOS, Charter is probably already pre-installed on your system. The default serif typeface on your system will be used if Charter is not installed.
I'm using Charter as the default English font because it is free and relatively suitable for screen reading. However, the character set of Charter is fairly limited, unless you are on macOS and iOS (Apple has their own version of Charter with expansive character set). You can switch to your favorite font by modifying the stylesheet.
Here are some other options I recommend.
- Charis SIL (free): A Charter clone with a much larger character set, but the glyph design of added characters is, in my opinion, not as good as the Charter licensed to Apple.
- Freight Text: My go-to replacement for system fonts such as Georgia. It looks very descent on screens, but can be too stagnant for me.
- Garibaldi: What you are reading right now. It's a very nice calligraphic old-style serif.
- Alegreya ht (free): Another very nice calligraphic old-style serif, with Greek and Cyrillic support.
- Source Serif Pro (free): Because it's free, the typeface is very popular. The most famous use case might be Gwern Branwen's personal website. It has Greek and Cyrillic support.
- Noto Serif (free): I'm using this as my default system serif typeface. It has a very large character set.
- Linux Libertine (free): It is used in Wikipedia's logo, but strokes might be too thin for screen reading.
- Palatino: If you don't have other options.
- Georgia: Still, if you don't have other options.
Said Achmiz also compiled a list of “Screen serif” fonts. You can find more options in the blog post.
You will have to tweak the line spacing and font size yourself if you are using a different font. You might find this calculator helpful.
If you have more suggestions for serif (or sans-serif) typefaces suitable for screen reading, please let me know. I'm willing to explore more options.
Sample article: Riemann sphere
Please compare the images in full-screen mode at 100% zoom level for better visibility.
These might be some interesting read if you care about typography on the Web and in general.
- 58 bytes of CSS to look great nearly everywhere
- Long-Form Websites and Typography by Eric Lawler
- Butterick’s Practical Typography by Matthew Butterick
- The Elements of Typographic Style by Robert Bringhurst
Sometimes the pop-up window of inline reference does not align vertically with the link.
If you know why this happens or how to fix it, please send a pull request. Thank you.
Some alternatives to try if you want a more elaborated redesign. I won't guarantee you will enjoy them, though.
wikipedia.rehash is licensed under CC-BY-NC 4.0. © 2020 Krasjet.
Please do not use this project for any commercial purposes without contacting me first.