Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Modify the look of the Safari 5 Reader function Web Browsers
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.]
    •    
  • Currently 3.43 / 5
  You rated: 5 / 5 (14 votes cast)
 
[29,340 views]  

Modify the look of the Safari 5 Reader function | 14 comments | Create New Account
Click here to return to the 'Modify the look of the Safari 5 Reader function' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Modify the look of the Safari 5 Reader function
Authored by: diamondsw on Jun 09, '10 08:01:19AM

Of course, modifying any files inside the application package will invalidate the application signature and affect Safari's use of the keychain. This is best addressed via the new extension mechanism.

I don't suppose it's possible for a user CSS file to override the Reader CSS design, is it?



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: leamanc on Jun 09, '10 12:15:35PM

I would think it would be possible. I might give it a try later and see what happens.

If anyone else has tried a user stylesheet and got it to affect Reader, please post here!

EDIT: I just tried it, by copying and pasting the replacement css in a small file and added it to Safari 5 as a user stylesheet. It did not make the changes in Reader.

Edited on Jun 09, '10 12:18:53PM by leamanc



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: TF on Jun 09, '10 04:03:03PM

Is this the case? Does editing this CSS file screw up Keychain access? Can someone please confirm this? i really want to try this hint but don't want to mess with Safari's signature.



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: squareman on Jun 09, '10 10:09:38PM

Perfectly easy to override the style in the reader using a user style sheet. No need to hack into application bundle (because that will get overridden with Safari updates).

The trick is getting a higher specificity score than what's in the reader's stylesheet. For example. I wrote a simple "reader.css" file to point at with Safari's advanced settings in prefs (Advanced > Style Sheet). They style in question to override in reader's style sheet is ".page" (worth "0,0,10,0" in specificity), So I simply need to write a style for "html .page" and that will have higher specificity (0,0,10,1). I tried it and it worked flawlessly and I was able to do it without even restarting or quitting Safari. Here was the style I used:

html .page { text-align: inherit; }

[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: squareman on Jun 09, '10 11:22:07PM

Okay, I replied earlier about user style sheets, but my comment in stuck in moderation. I was wrong. You cannot use the user stylesheet to override the style (even if you pull out the draconian !important).



[ Reply to This | # ]
Inline CSS Styles
Authored by: rbrtrx on Jun 10, '10 04:45:58AM

Doing some inspection shows that Reader’s CSS styling is actually applied as inline styles, presumably copied from the CSS file in the app bundle. Therefore, changing that CSS file changes what ends up in Reader, but user stylesheets won’t since inline styles have priority (even with the dread !important) over user stylesheets.

Incidentally, this also prevents a) Reader’s CSS from affecting the loaded page, and b) the loaded page’s CSS from affecting Reader. It was pretty nearly necessary for them to do it this way if they wanted to keep Reader as HTML/CSS within the same web view (and apparently they did).

A Safari extension might have more luck, as it ought to be able to alter the inline styles directly. We shall see.



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: rbrtrx on Jun 10, '10 05:26:26AM

Sadly, it looks like extensions aren’t loaded into safari-resource URLs (which is apparently what Safari is using to load the Reader sources). IIRC file URLs are treated the same way.

I suppose we should file a bug on this.



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: schutt on Jun 09, '10 08:12:20AM

D'oh! I just finished posting my version of this hint when this showed up! While you are editing the style, don't forget to change the link colors. Dark purple on black is hard to read. Changing from justified to left-aligned text also helps with readability, due to Safari's mediocre typesetting.



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: barryjaylevine on Jun 09, '10 09:25:21AM

And don't forget that Arc90's Readability bookmark works just fine in Safari (and Firefox and even Mobile Safari).

Unlike Reader, Readability prints header and footers (if your browser has been configured to do so).

---
-----
Two things in this world aren't overrated: MacOSX and Lemon Meringue Pie.



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: mikebell on Jun 09, '10 11:44:00AM

Readabily sucks because it doesn't fetch all the pages of a multi-page article. Reader does.



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: NURB on Jun 09, '10 12:50:55PM

I was only able to change the h1.title font to the free Font called "Aller" :

From:

h1.title {
font-family: Palatino, Georgia, Times, "Times New Roman", serif;
font-weight: bold;
font-size: 1.33em;
line-height: 1.25em;
}

To:

h1.title {
font-family: Aller;
font-weight: bold;
font-size: 1.33em;
line-height: 1.25em;
}

All other font changes are not accepted form Safari.
I did a content search for the used "Palatino" font in all documents of the Safari folder with no luck.
Palatino is the main article text font.



[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: asadKing on Jun 09, '10 06:40:29PM
I changed mine to a near black background and near white text this makes it more subtle on the eyes.

Try it out.

.page {
            width: 658px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 10px;
            padding: 45px 70px;
            color: #cccccc; ———————— Silver Colour
            background: #191919; ——————— Lead Colour
            border: 1px solid #c3c3c3;
            position: relative;
            overflow: hidden;
            -webkit-transition: height .5s ease-out;
        }


[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: Jarques on Jun 10, '10 10:21:47AM
I made a simple mod that gets rid of the ugly scrollbar, and the justification on the text.

http://jarqu.es/sm

[ Reply to This | # ]
Modify the look of the Safari 5 Reader function
Authored by: David Allen on Jun 12, '10 01:51:44PM

I installed your mod. I like it . Thanks.

---
Dah•veed |David Allen|
Monterrey, NL, Mexico



[ Reply to This | # ]