Safari 5: How to Hack and Customize the Reader

   Posted June 8, 2010 by David Kirk in Apple Mac

Safari 5 now contains a “reader” mode that converts busy web pages into boring black text on a white background. If you are a heavy user of this mode, you might want to hack this display into something more unique to you.

So you like Safari’s new reader mode, but you want to tweak it a bit? It’s really easy to change.

Disclaimer: You can really break safari if you don’t know what you are doing. If you do bork the application, you should be able to delete it and reinstall.

Here’s how to customize the reader in OS X:

1. Find your Safari.app in your Applications.
2. Right-click (control-click) on it and select Show Package Contents
3. Open Reader.html in your favorite html/css editing application.
4. Consider making a backup of the file before editing in case you break things.
5. Edit the css and html to your hearts content. You may need to input your password to save.
6. To test you’ll have to open new web pages in the reader each time.

Here are some nonsensical changes for your pleasure…

Before:

safari reader before hack

After:

safari reader before hack

Obviously my changes are silly, but there are legitimate uses for this. For example…
– Changing the window size for bigger/smaller screens
– Changing colors for better reading in certain light situations
– Changing font styles

 

About David Kirk

David Kirk is one of the original founders of tech-recipes and is currently serving as editor-in-chief. Not only has he been crafting tutorials for over ten years, but in his other life he also enjoys taking care of critically ill patients as an ICU physician.
View more articles by David Kirk

The Conversation

Follow the reactions below and share your own thoughts.

  • Hello

    Is there any way you could give a more in depth tutorial on this? I used a free html editor to change the reader to White text on Black background, but I keep my screens dimmed down a lot and the dark blue links are indistinguishable from the background. I want to lighten them up but I don’t know where in the reader.html file the control for link colors are. Thank so much for the help!

    • Anonymous

      CSS editing is an art into itself. Try right clicking on the element you want to change and “inspect” the element. That will give you hints into what part of the css you need to edit.

      I suspect you will need to edit the “.page a” sections.

  • DILIP DWIVEDI

    I want to Delete Day to Day items opened on Google Chrome History

  • Panamajack

    How about something that forces Reader into use? Many websites are now blocking Reader from working, but it’s inspiration, Arc90’s Readability project, still works fine.