CustomReader

Note:See this page for information on the old, pre-Safari 6 version of CustomReader.

Safari Reader is a great way to focus on the main content of a web page without being bothered by ads and other distractions, but I wished I could do more to change its look beyond adjusting the font size. So I wrote CustomReader to let me do that.

screenshot
CustomReader (in Safari 7)

With CustomReader, you can change pretty much any aspect of Safari Reader’s appearance. CustomReader’s settings panel has a graphical user interface that lets you edit a few basic settings, like body font and background color, with a few clicks. But the true power of CustomReader lies in the Advanced tab, where you can directly edit the custom stylesheet that the extension inserts into Safari Reader. By editing this stylesheet, you can override any of Safari Reader’s built-in styles with one of your own.

CustomReader has another feature that may be of interest to some. If you find yourself frequently invoking Safari Reader on a certain kind of page at a specific site—for instance, articles on the New York Times website—you can have CustomReader automaticallyenter the reader whenever you open that kind of page.

How to Use CustomReader

As long as the extension is installed and enabled, CustomReader loads automatically every time you enter Safari Reader. You don’t need to do anything to activate it.

To customize the reader, start by opening CustomReader’s settings panel. There are three ways to do that. First, you can click the settings button that the extension adds to Safari Reader. In Safari 7 and 6.1, the button looks like a little gear and sits to the right of the font size buttons at the top-left corner of the first Reader page.

screenshot
The Customize Reader button in Safari 7

In Safari 6.0.x, the settings button is the leftmost button in Reader’s HUD—the hovering toolbar that shows up near the bottom of the window when you start Safari Reader.

screenshot
The Customize Reader button in Safari 6.0

Second, you can type a hotkey while Safari Reader is active. The default hotkey is Control-R. You can change it in the “Other” tab of the settings panel.

Finally, you can click CustomReader’s toolbar button, which is hidden by default. To unhide it, right-click the toolbar, select the Customize Toolbar command, and drag the button to the toolbar. Note: If you use the toolbar button, the settings panel will open as a popover, instead of a floating iframe on top of the reader.

Having opened the settings panel, you’ll notice that it has four tabs, entitled Basic, Advanced, Auto-Read, and Other. Each of these tabs is explained below.

The Basic tab
screenshot
The Basic tab

In this tab, you can change a few basic style properties of the reader using simple controls. The available properties are as follows:

Body font
Sets the font of most of the text in the reader, excluding headings and certain other elements. You can use the popup menu to select a common font or enter any font name in the input field.
Heading font
Sets the font used for headings. You can use the popup menu to select a common font or enter any font name in the input field.
Text color
Sets the color of most text in the reader, excluding elements that have a specific color, such as links. Click the box to pick a color or type a hex value.
Background color
Sets the background color of reader pages. (Does not affect the dark, semi-transparent area surrounding the pages.) Click the box to pick a color or type a hex value.
Text align
Sets the alignment of paragraphs. Has no effect on other types of block elements. Note: For right-to-left (RTL) languages, the “Left” setting results in right-alignment.
Paragraphs
Determines whether paragraphs are displayed with indentation or with spacing between them. These options are mutually exclusive.
Page width
Sets the width of reader pages.
Zoom factor
Sets a global magnification level for text, images, and all other page elements. Use this if Safari Reader’s maximum font size is not large enough (or its minimum font size is not small enough).

Click the Restore Defaults button to reset all settings in this tab to the default values.

The Advanced tab
screenshot
The Advanced tab

If the Basic tab doesn’t offer enough control, you can directly edit CustomReader’s injected stylesheet here. Since this stylesheet is inserted below Safari Reader’s built-in ones, any rule defined here that has the same selector as a built-in rule will override the built-in rule.

To save your changes, click the Save button or type ⌘S. To preview changes before saving them, hold down the Option key. To restore the default CSS or revert to the last saved version, click the appropriate button.

Note: If you make changes in the Basic tab, the custom stylesheet will be automatically updated to implement those changes. If you have deleted a rule or declaration that CustomReader needs to implement a basic setting, the rule or declaration will be recreated.

The Auto-Read tab

The auto-read feature uses regular expressions to identify pages for which Safari Reader will be automatically activated when you visit them. This works because most of the time, similar pages on a particular site have URLs that are similar in specific ways, and regular expressions can be used to differentiate these URLs from those of dissimilar pages.

Take, for example, the website of the New York Times. Here’s the URL of a typical story page from that site:

http://www.nytimes.com/2012/06/07/opinion/the-age-of-unsatisfying-wars.html

You’ll notice that these story URLs—as opposed to the URLs of various kinds of index pages on the site—adhere to a particular pattern, which can be characterized as (ignoring the protocol prefix):

(hostname) / (four-digit year) / (two-digit month) / (two-digit day) / (one or more “section paths”) / (the filename ending in .html)

This pattern is captured in this regular expression:

www\.nytimes\.com/\d{4}/\d{2}/\d{2}(/.*)+/.+\.html

To enter a regular expression for the auto-read feature, open CustomReader’s template editor (as discussed under Customizing the reader, above) and switch to the Auto-Read tab. Enter each regular expression on its own line, and click Save.

You can find a lot of information about regular expressions on the web. I find this site particular helpful. But if you need help constructing a regular expression, you’re welcome to email me (canisbos@gmail.com), and I’ll see what I can do.

The Other tab

These are the settings on this tab:

Activate Reader alternate hotkey
Sets CustomReader’s alternate hotkey for activating Safari Reader. You can use this in addition to Safari’s built-in hotkey, which is Command-Shift-R. Click in the box and type the desired hotkey.
Customize Reader hotkey
Sets the hotkey for opening the settings panel. Click in the box and type the desired hotkey.
Hide “Activate” context menu item if toolbar button is showing
CustomReader adds an “Activate Safari Reader” item to the context menu of web pages. If you’ve enabled CustomReader’s toolbar button, you can hide this context menu item by enabling this option.
Speed up keyboard scrolling
If enabled, makes the reader scroll faster when you scroll using the space bar, the Page Up/Down keys, or the Up/Down keys.

Frequently-Asked Question

How can I change the color of the area surrounding the article pages? Especially, how can I make it match the page background?
In the Advanced tab, add a rule for the body element and set a background-color declaration on it, like this:
   body {
      background-color: #fbfbfb;
   }
If you want it to match the page background, copy and paste the background color value from the #article rule. If you’re doing that, you might also want to get rid of the border between the page and the surrounding area. To do that, add box-shadow: none; to the #article rule, so that it looks like this:
   #article {
      width: 800px;
      background-color: #fbfbfb;
      box-shadow: none;
   }

2013 Canisbos Computing
Creative Commons License

Notes