Good. Evil. Bratwurst.

Customizing Safari Reader

Posted on by arlen

OK, so the new Safari (version 5) is out, and it includes a “reader” feature that’s been taking some heat.

The complaints are justified — what it does to links is insufficient for some vision-impaired users, and justified text looks horrible without good hypenation, which Safari doesn’t do, just to name the two most obvious.

But that can be fixed.

The proper way to adjust Safari’s defaults is through a custom user style sheet. But that doesn’t work here, because Safari doesn’t load the user style sheet when the Reader is engaged. Hopefully Apple will fix this bug (and yes, it should be considered a bug) in the near future.

But that doesn’t mean you have to wait until they do in order to change the reader style defaults. It just means you have to go a little deeper to do it.

  1. Open your Applications folder
  2. Right- (or control-) click on Safari
  3. Select “Show Package Contents” from the contextual menu
  4. Open the “Contents” folder
  5. Open the “Resources” folder

There you will find the file “Reader.html,” which is the template for displaying pages in Safari Reader. In order to change it, you will need to open it in your usual text editor. (Neither Pages nor TextEdit are up to doing this. I used BBEdit to change mine, but Text Wrangler, Textmate, or Coda should be up to the challenge as well. You may be warned about the ownership of the file when you make changes to it.) All of the styles you want to change will be inside the style block with the ID “article-content.” For example:

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

is the code block that sets the colors and removes the underline from the links, and

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

is where it sets the text to be justified, instead of ragged-right.

If you want the links underlined, change “text-decoration: none” to “text-decoration: underline” and if you want ragged-right paragraphs, change “text-align: justify” to “text-align: left” and save the file (the system will prompt you for the password when you save the file). Your Reader will now pick up your new settings.

The usual warnings apply to making this sort of change. It’s best to save an unchanged copy of Reader.html to fall back to, and any changes you make may be erased by a future update to Safari, so you might want to store a copy of the changed file in your documents folder, as well. But, hopefully, the next time Apple updates Safari it will fix the bug that prevents user style sheets from being applied to Reader. If/When that happens, I’ll follow up with instructions for creating a sheet to do that, as well.

(Edited 6/14 to correct “left/right” typo. Mea Culpa. Meus bardus.)

3 Responses to Customizing Safari Reader

  1. Thanks for this post, should be fun to mess around with reader. A small point — left justified text is known as ‘ragged-right’, not ragged-left. As in, the right side of the text block is not clean, it’s ragged.

  2. So it is. And while my brain is aware of that, it apparently failed to inform my fingers of this while they were engaged in producing the text. Thank you for the correction. The error is (or will soon be) rectified.

Leave a Reply

Your email address will not be published. Required fields are marked *

It sounds like SK2 has recently been updated on this blog. But not fully configured. You MUST visit Spam Karma's admin page at least once before letting it filter your comments (chaos may ensue otherwise).
June 2010
« May   Jul »