Modify the look of the Safari 5 Reader function

Jun 09, '10 07:30:01AM

Contributed by: feyd.rm

Safari 5 introduces the Safari Reader feature, for selecting article bodies to make reading and printing easier. I started looking around for where this new Reader functionality lives to see if it was customizable and I found that it is.

There is essentially a built-in CSS file with a tiny bit of Javascript located here:
/Applications/Safari.app/Contents/Resources/Reader.html.

You'll need to control-click on the Safari application icon and select Show Package Contents to navigate to this file, and a text editor (like TextWrangler) that can open and save files owned by root.

After backing up the file to Reader.html.bak, I changed this bit:

.page {
            width: 658px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            padding: 45px 70px;
            color: black;
            background: white;
            border: 1px solid #c3c3c3;
            position: relative;
            overflow: hidden;
            -webkit-transition: height .5s ease-out;
        }
to:
.page {
            width: 658px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            padding: 45px 70px;
            color: white;
            background: black;
            border: 1px solid #c3c3c3;
            position: relative;
            overflow: hidden;
            -webkit-transition: height .5s ease-out;
        }
It displayed as black with white text!

There are many other customizations in the Reader.html file that can be made here with regard to images, fonts, etc.

[crarko adds: I tested this, and it works as described. As suggested in the hint, keep a clean backup of the original file before making any changes.]

Comments (14)


Mac OS X Hints
http://hints.macworld.com/article.php?story=2010060813435933