Customizing Safari 5 Reader

Safari 5 adds an excellent new feature: Safari Reader. This not only pulls the main text out of a webpage—as is done in bookmarklets such as Arc90′s Readability—it also consolidates an entire multi-page article. This greatly improves the legibility and interface of many websites. Unfortunately, the Safari Reader style isn’t quite what I prefer. Fortunately, it is easy to modify, all you have to do is edit the stylesheet in Safari.app’s Reader.html. This read-only file should be located at /Applications/Safari.app/Contents/Resources/Reader.html. You can access this through the command line, or by control-clicking on Safari in Finder and selecting ‘Show Package Contents’. Just open Reader.html in your favorite text editor and modify the styles under the .page class selector. If you are using Finder to access the file, you’ll have to change the file permissions so that you can save the file.

So, what do you change? I think an appropriate mix of light-on-dark and dark-on-light eases eye strain when reading back-lit text, as on all computer monitors. Since most websites are black-on-white, I chose white-on-black text for my alternate Safari Reader style. I also updated the link colors to be readable on a black background. Even if you like the default colors, you should change the text-align. Since all web browsers have poor typesetting, it is typically much easier to read left-aligned text than fully-justified text, so I also changed from justified text to left-aligned text. Now, showing only the selectors and lines changed, here are my alterations:

.page a {
	color: rgb(32, 0, 127);
}

.page a:visited {
	color: rgb(32, 0, 127);
}

becomes:

.page a {
	color: rgb(133, 174, 255);
}

.page a:visited {
	color: rgb(172, 133, 255);
}

and

.page {
	font: 20px Palatino, Georgia, Times, "Times New Roman", serif;
	text-align: justify;
}

becomes:

.page {
	font: 22px Palatino, Georgia, Times, "Times New Roman", serif;
	text-align: left;
}

and finally

.page {
	color: black;
	background: white;
}

becomes:

.page {
	color: white;
	background: black;
}