6

The typeface used in Safari's "Reader" mode (on both iOS and OS X) seems to be some form of Palatino, which, while certainly not the worst screen face, isn't the best either. This used to be a limitation in iBooks as well, until the addition of excellent screen faces like Charter and Athelas.

Is there a way to change the typeface used by Safari's Reader mode?

5

The easy way is to click on the "Aa" on the right side of address window once you are in reader mode already, and choose font and background colors :)

screenshot of the "AA" button in Safari browser address bar in Sierra

  • 1
    Any idea what version (of iOS and OS X) this appeared in? – orome Nov 24 '15 at 20:07
3

On my system (Yosemite 10.10.5), I've noticed that changing Reader.html styles gives no effect. I've inspected the Reader code throug Safari and found that the the only CSS that is linked with Reader is ResourcesWBSReaderSharedStyleSheet.css.

enter image description here

Here is the path to Reader CSS file: /System/Library/PrivateFrameworks/Safari.framework/Versions/A/Resources/WBSReaderSharedStyleSheet.css

I've successfully customized the CSS and reached another level of happiness.

Update: In El Capitan, unfortunately, this trick does not work. It seems like the WBSReaderSharedStyleSheet.css is not used anymore, all the settings are settled in Reader.html, but changing the CSS settings in the file does not affect on the final look.

2

I've never tried it, but apparently you can modify the file: Safari.app/Contents/Resources/Reader.html

From an Apple community support page:

Do a right-click on the application Safari and choose +Show Package Contents+. An new finder window will open. There is one folder in there named Contents. Contents includes several files and folders, navigate to see the content of the folder Resources until you find a file named Reader.html. This is the file you want to edit. Most probably you will not have the rights to do so. Depending on your choice of text editor, you are asked for a admin password when opening the file or when you try to save it. I use the nice TextWrangler from BareBones and it opens the file without asking (it will do so later in the process).

Now edit the CSS to your liking and save the file.

Open Safari and check out how it looks.

And one more thing: With the next update of Safari your changes in Reader.html will most likely be overwritten. So you might want to keep a version of Reader.html at another location outside the application package Safari to re-implement your changes.

As always, proceed with caution when modifying default applications and have backups of both any edited files as well as your important data.

  • Any ideas how one might do this for iOS? – orome May 1 '12 at 21:47
  • Probably no way of doing this - I'd look instead for other apps with similar functionality, like Instapaper. – da4 May 2 '12 at 16:11
2

New new location of Reader.html is at

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

if you're not sure, just use locate

  • Please edit the accepted answer with this updated information. It's not really an answer of its own. – orome Jul 31 '15 at 21:44
0

You can also change the iOS Reader.html CSS on iPad, iPhone or iPod, confirmed working on iOS 8.1.2 iPad Air 2. Here's how:

You will need to Jailbreak your iOS device, and download a file system managing app called iFile. Then you'll have full Explorer/Finder functionality on your iOS device.

Next, navigate to the folder:

/var/stash/_.HVRQId/Applications/MobileSafari.app/Reader.html

This is the location on my iPad Air 2 with iOS 8.1.2, it may differ for you. If you upgrade to the paid version of iFile for $4, you can do a search system wide for the Reader.html file, which is what I did.

Open in Text Viewer, now just change the CSS as desired, anywhere you see the "font: -apple-system-*" declaration.

If you want to change the main body typography, add a font-family declaration to the .page tag. For example:

  .page {
        font: -apple-system-body;
        text-align: start;
        font-family: Georgia;

}

You can do the same thing to edit the page heading under the h1.title tag

h1.title {
        font: -apple-system-headline;
        font-weight: normal;
        text-align: start;
        -webkit-hyphens: manual;
        font-family: Georgia;
    }

Save Reader.html, reload the Safari webpage, and enjoy your new Reader font!

-1

It is certainly possible to make changes in iOS Safari without a Jailbreak. Don't know exactly about Reader View, but the general algorithm is:

  • make backup to your computer;
  • decrypt backup file with special tools;
  • find Safari and edit its contents.

Also for Safari you can use plugin CustomReader II.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .