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.
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 automatically enter 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’s HUD—the hovering toolbar that shows up near the bottom of the window when you start Safari Reader.
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
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.
- 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
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:
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:
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 (email@example.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.