Rightsizer

Note!

Rightsizer has been superceded by a new extension: Quickstyle. Quickstyle does everything that Rightsizer does, and it adds the ability to apply any CSS property to anything. If you don’t need this capability, don’t worry, it won’t get in your way—so you might as well install Quickstyle instead of Rightsizer. Especially since I will not be developing Rightsizer any further!

Safari has the built-in ability to resize, or “zoom”, the contents of a web page, making everything bigger (to make things easier to see) or smaller (to fit more of the page in the window). It can also resize just the text on a page, leaving everything else the same.

I often want to enlarge text on a web page, but not all of it (which is what Safari will do). The problem is that when you enlarge the text without also enlarging the text’s containers, bad stuff can happen: lines can break in weird places, and text may even overflow its container (or get truncated). This usually occurs inside narrow columns, such as sidebars, where the web designer didn’t plan for text to be enlarged.

Another problem with Safari’s zoom feature is that your zoom level only applies to the current tab—not to a particular website. If you close the tab, your zoom level is forgotten, so the next time you visit the same site, you have to set the zoom again.

I wrote Rightsizer to work around these shortcomings of Safari’s text zooming feature.

With Rightsizer, you can resize specific kinds of text elements (or, more precisely, text elements of specific classnames or ID values) without affecting other text on a page. So, for example, on a typical story page of a news website, you could resize just the body of the article while leaving the sidebars intact. And Rightsizer will remember your changes and reapply them when you visit the same page—or similar pages on the same website.

Alternatively, you can zoom the whole page, just like with Safari’s built-in zoom. But unlike Safari, Rightsizer remembers your zoom level, and it does so on a per-site basis.

You can also define a favorite font and size in Rightsizer’s settings, and have Rightsizer apply them where you want with one keystroke.

Finally, you can also apply a high-contrast color scheme to specific kinds of text elements or to a whole document. Two color schemes are supported: black-on-white and white-on-black.

How to use Rightsizer

Almost every action in Rightsizer is performed with a combination of a mouse click and a keystroke. The general procedure is as follows.

  1. Click a representative sample of the text you want to change and hold down the mouse button. Don’t let it go yet. (For example, if you want to resize the body of a news article, click a typical paragraph in the article and hold the button down.)
  2. Press the key corresponding to the action you want to perform.
  3. Release the mouse button.

The table below lists the keys you can press while the mouse button is down, and what they do. (Note that some actions can be triggered by more than one key.)

Key(s) Action
A, +, = Increase the font size
Z, - Decrease the font size
F, \ Apply your favorite font and size
Q, 0 (zero)
Restore the default font and size
C Apply high-contrast colors
Shift-C Apply inverse high-contrast colors

In addition, there are three special keys that modify the behavior of the actions keys in various ways, and they are explained in the table below. These keys are pressed before any of the action keys.

Key Effect
W Changes will be applied to the whole document.
X Changes will be applied only to the clicked element—not to all similar elements.
T Changes will not be saved. (Applies only if autosaving is enabled.)
Saving your changes

By default, Rightsizer will remember any changes you make and reapply them automatically the next time you visit the same website.

To remove all saved changes for the current site, right-click anywhere and select Forget Font Sizes in the context menu.

If you’ve disabled the automatic memory in Rightsizer’s settings, you can tell Rightsizer to remember your font sizes for a site manually: Right-click anywhere and select Remember Font Sizes in the context menu.

Tips

If you want to resize all the text in the parent container of a certain element, first select (highlight) some text that spans more than one element in the container. Then invoke Rightsizer as usual. Rightsizer will apply your changes to the parent container of all the elements that are spanned by the selection. You can use this trick to resize all of the text on a page by typing ⌘A (to select everything) before invoking Rightsizer.

Normally, the A and Z keys work by changing the target elements’ font size. You can change the resizing method to use a zoom factor instead by selecting the “Prefer zooming” option in Rightsizer’s settings. Whichever resizing method you choose in the settings, you can use the other method on a case-by-case basis by pressing Option-A or Option-Z instead. Note, however, that if you press W to target the whole page, subsequent resizing will always use the zoom method, regardless of the resize method setting or whether the Option key is pressed.

You can choose the color scheme that will be applied when you press C in Rightsizer’s settings. The choices are black-on-white and white-on-black. Whichever scheme you choose as the preferred one, you can apply the inverse of it by pressing Shift-C or Option-C instead.

If you enable the option to “Take over ⌘+/⌘- keys” in Rightsizer’s settings, pressing those hotkeys will no longer invoke Safari’s built-in zoom functionality, but rather cause Rightsizer to zoom the whole page its way (and save your zoom level, unless you have autosaving disabled). You can still access the built-in zoom functions by holding down the Shift key while typing either hotkey.

Notes

When you press A or Z after pressing W, Rightsizer will resize the document using a zoom factor, not a font size. This means that images and other non-textual elements will also be resized.

When you use the X key to limit changes to just the clicked element, the changes will not be saved.

When specifying your favorite font & size in Rightsizer’s settings, you must use the following format:

XXpx/YYpx font-family

where XX is the font size in pixels, YY is the line height in pixels, and font-family is the name of the font family. For example:

15px/22px Helvetica Neue

You must include both the font size and the line height, and both measurements must be in pixels.

Normally, when resizing text, Rightsizer uses the CSS font-size property to change the text size. If you enable the option “Use CSS zoom instead of font size” in Rightsizer’s settings, Rightsizer will use the CSS zoom property instead. On rare occasions, this can work better than changing the font size (but it usually does not work as well).

Credits

Trevor Fancher contributed the idea and code to choose a parent target element based on a text selection spanning multiple child elements. Thanks, Trevor!

Download Rightsizer

2011 Canisbos Computing
Creative Commons License

Notes