Hacking Safari Reader for even less distraction

If you’re on a Mac an you haven’t tried out Safari Reader yet, you should. It’s a really simple but incredibly useful little feature that detects when you’re on a page with a lot of text, and offers to display that text in a reduced distraction popup. (Update: thanks to reader Tom Harvey, who points out that Safari is also available on Windows, and you can use the same technique to hack the reader display there.)

Safari shows this little icon when Reader is available.

This morning, I visited an an article page suggested to me by a colleague, but the annoying animated Flash ads underneath the overlay were still visible and distracting, because the Reader panel doesn’t take up the whole width of the browser window, and the overlay is somewhat transparent (20%, it turns out).

There’s actually an easy way to hack this so that the overlay is completely opaque. Safari Reader’s UI is provided by an HTML file embedded in the Safari application bundle, and that file contains all of the CSS used to control its appearance.

Here are the steps to make the background completely opaque and distraction free.

First, open the Finder, and locate Safari inside the Applications folder. Control-Click (or right click if you have it enabled) on the app file and select “Show Package Contents” from the popup menu. This will bring up a new Finder window, with a single Folder in it, called “Contents”. Inside the Contents folder, there’s a folder called Resources, and inside that is a file called “Reader.html”

Now, open Reader.html in your favourite text editor, so Control-Click and chose Open With… and select your editor from the list. If you don’t know which app to use, your best bet is probably Text Edit.

Inside Reader.html there are a bunch of CSS styles, but the one you’re looking for is #background, which is on line 122 of the file. By default, this sets the opacity to 80%, so changing the last number in the background-color directive from 0.8 to 1 will make it 100% opaque.

The only drawback to this approach is that when Apple updates Safari, you’ll need to reapply the hack because the update will overwrite the entire application bundle.

Here’s what that CSS code looks like once you’ve made the change:

Now, save the file. OS X may ask you to enter your admin password in order to save the file. Once the file is saved, restart Safari and enjoy your new completely distraction-free reading.