Customizing Safari Reader in 5.1, the solution

When Safari 5.0 was released, I was excited about the new Reader feature, but had to edit a file inside the application package in order to customize it. (A hint on how to Modify the look of the Safari 5 Reader function was also posted on Mac OS X Hints at the same time.) When Safari 5.1 was released this trick no longer worked. Even after some digging, I couldn’t find a way to change the Safari Reader styles. Fortunately, someone responded to my request for information on a workaround. It turns out that it is still easy, I just hadn’t thought to look in the correct place for the new file. In Safari 5.0, Reader.html was stored directly in the application package:

/Applications/Safari.app/Contents/Resources/Reader.html

With the release of Safari 5.1, it was moved to:

/System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources/

But there are also some links to this directory, so it can also be found at:

/System/Library/PrivateFrameworks/Safari.framework/Versions/Current/

and

/System/Library/PrivateFrameworks/Safari.framework/Resources/

Given the naming of the files, I expect the actual location will change with future updates (eg Versions/B) with the link targets updating so you don’t have to identify the current version.

Now that we have access to the Reader.html file, we can update the styles as in Safari 5.0. This is a system file, so it is a good idea to back it up before making changes. To edit the file, you’ll either have to unlock the file or use an editor that can prompt for administrator credentials when saving. I used TextWrangler so that I didn’t have to bother unlocking the file. I also set up a more advanced method to save time when the next update is released.

The changes

When reading long blocks of text on a monitor I prefer light text on a dark background, preferably left-aligned, so those are the changes I made. In the order they appear in the file the changes are are:

The link colors can be updated to look good on a dark background.

Old:

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

New:

        .page a {
            text-decoration: none;
            color: #9bf;
        }

        .page a:visited {
            color: #b9f;
        }

The text can be changed from the awkward full-justification to ragged right.

Old:

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

New:

        .page {
            font: 20px Palatino, Georgia, Times, "Times New Roman", serif;
            line-height: 160%;
            text-align: left;
        }

The text and background colors can also be changed. I prefer light text on a dark background.

Old (partial):

        .page {
            width: 658px;
            …
            color: black;
            background: white;
            …
}

New (partial change):

            color: white;
            background: #222;

Once the changes are saved, they apply to any open tabs that Safari Reader has not been loaded in. If you have used Reader, you’ll need to close and reopen the tab before the changes apply. It is probably a good idea to close Safari before modifying the styles, but you don’t have to.

Some of the styles appear to be overwritten before you see them. For example, changing the size of the body font has no effect. If you want to change the size of the typeface, you can use the old zoom trick. That is, in the body definition under @media screen, just add something like zoom: 125%;.

[Update] The !important rule works in Safari 5.1.1. So if you want to change the body font, just change:

        .page {
            font: 20px Palatino, Georgia, Times, "Times New Roman", serif;

to something like

        .page {
            font: 22px Helvetica, sans-serif !important;

The fast way

An alternative to directly editing Reader.html is to use diff and patch. This is useful because it is likely that the Reader style will continue to require editing every time Apple releases a Safari update. I used diff to create a patch file for my changes. This can be applied using the patch command:

sudo patch /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources/Reader.html \
< SafariReader.diff

This will save time when the next Safari update comes out. Remember, you should only use sudo if you are absolutely sure you know what you are doing. If you aren't an admin, you won't have permission to use this. Now when an update is released, you can just run this command and, unless Apple makes major changes, you'll have your preferences back.

My patch file is here.

Thanks to Nikita Prokopov for alerting me to the new location. Once I knew where the file was, I also found a Russian version of this hint.

If you don't like this solution, you can always use an alternative such as Readability, which is now available as as Safari Extension.

[Update] This hint appeared on Mac OS X Hints.

[Update] The !important rule now works, see above.