Filters for Reading on the Web

Will reading on the web ever be as good as reading a book?

Will reading lengthy text on the web ever be as comfortable as curling up in your favorite chair with a paperback? In theory, computers offer some reading advantages such as fast look-up and infinite storage. In practice, conflicting priorities of site design and current display technology get in the way.

For people like me who read hours per day, there has to be a better way. Luckily, there is.

Why Reading on the Web is so Difficult

The paperback novel is the easiest of all formats for me to read and the benchmark against which I compare all forms of reading. Currently, reading text on the web is not even close. Here is how I classify the various reading issues on the web that make it so much more difficult to read than a paperback:

  1. Typography choices
    • fonts
    • type size and line spacing (usually too small)
    • colors (too bright, over-contrast, under-contrast)
    • page layout
  2. Distracting web page elements
    • ads (blinking text, pictures, animations)
    • branding
    • links
    • site navigation
  3. Distracting interface (browser and operating system)
    • tabs, icons and buttons
    • menus and search boxes
    • windows, title bars, and scroll bars
    • status and tool bars
    • pop-up messages
  4. Hardware
    • light emitting monitors unnatural for human eyes
    • monitor resolution lower than print resolution
    • reading at a desk for long periods is uncomfortable

Some people address these problems by reformatting and printing most long articles. This is fairly easy to implement and comes close to addressing all four reading issues, though the 8.5 x 11 format is not as good for sustained reading as the paperback book. More of a problem is the act of printing, which uses up paper, ink, time, money, and storage space. This is not for me.

How to Vastly Improve Reading on the Web: Three Filters

If you suffer from distraction, eyestrain, or reduced concentration while reading on the web, the following three filters should help. If you spend a lot of time reading on the web, the combination of all three is best:

  1. Readability button from arc90 (or Readable)
  2. F11 key on your browser (Windows and Linux only)
  3. Small device or narrow screen

Continue reading for more detail on each filter and additional help for widescreen monitors.

Reformat with the Readability button

Before installing the Readability button, your bookmarks toolbar must be enabled. On Firefox Menu: View > Toolbars > Bookmarks Toolbar. Then you can follow the instructions here to install the Readability button. Before installing the Readability button, choose the style, size, and margins you think will be most readable for you. On a vertically aligned, 19 inch monitor, I like Style: Novel, Size: Large, Margin: Medium.

After installing, click on the Readability button in the Bookmarks Toolbar. It will extract the main body text from the current web page, formatted beautifully. There are no drawbacks (except that it doesn’t work on all web sites). If you don’t like the formatting style, delete the button and reinstall with different style, size and margin choices.

An alternative to Readability that (as of March 2011) is faster and provides more options is Readable.

I love the Readability/Readable button approach and use it extensively – with one click, the issues of typography and distracting page elements go away.

Eliminate distractions with F11

There’s a very simple and effective method for Windows and Linux users to eliminate all interface distractions:

Press the F11 key to put Firefox, Internet Explorer, or Opera into full screen mode. Read.

F11 works terrifically on small screens, especially on a narrow display. F11 completely gets rid of all interface clutter from the browser and the operating system. If used in combination with the Readability button, it cleanly and easily takes care of the first three web reading issues. Just click Readability then press F11.

F11 used alone does not always work so well for reading on large and/or widescreen monitors. It does work well for sites like FilterJoe where the main page width is fixed and there is a dull colored background color outside the main page. But most web sites are not designed this way. Pressing F11 may cause text to stretch wide, may expand a distracting background, or may cause the menu or other elements to slide far to the left.

UPDATE: The rest of this section is no longer necessary. Readability now fixes the width of the text instead of the margin.

For F11 to improve reading on a widescreen monitor, you’ll want to create a second Readability button designed to work in combination with F11. Here’s how:

  1. Right click on the Readability button you installed
  2. Choose properties
  3. Rename to something else, perhaps “read” in small letters
  4. Go to arc90’s Readability site again, here
  5. Choose Style: Novel, Size: Large, and Margin: Extra Large
  6. Drag this Readability button to your toolbar
  7. Rename it to something else, perhaps “READ”, that will help you remember that this version of the Readability button will produce very large type with very wide margins.

Now click the new button you created followed by F11. The browser will fill the screen and you’ll see very large text with a very wide margin.

While the above procedure works, a preferable solution would not require jumbo fonts.

Effectively using large monitors is a topic in and of itself with benefits far beyond reading. After much testing, I’ve concluded that it’s very hard to eliminate distractions on large, horizontal wide-screen monitors. Thankfully, large monitors are now available that can rotate into vertical position, which is the best monitor setup to reduce distraction.

Use a narrow screen or better yet a small device

Many people now use large, wide monitors with their desktop computers. As described in the prior section, such monitors are not very well suited for reading lengthy text. A vertically orientated monitor is a big improvement, and is what I recommend for online reading at a desk. Those of you with a large or widescreen monitor can hook up a second, smaller monitor to your computer for reading. Alternatively, a second computer with small monitor can be used.

The first two filters work well with any device whose width is 1080 or fewer pixels. Unfortunately, this still doesn’t take care of the fourth reading issue, “Hardware.” I’m not yet aware of a hardware solution as simple and effective as the filters I’ve mentioned so far.

What I would really like to see is all four reading issues go away with one click. Can someone please make the following a reality?

Go to web page. Click. The text appears on a piece of E-paper (Electronic Paper), well formatted for reading. You can carry it with you and therefore read it anywhere.

There are a number of small, portable devices that are superior to reading at a desk, but they all have shortcomings. Briefly expressed, here is my opinion regarding current portable choices for reading:

  • E-book readers by Sony and Amazon–easy to read but slow, restricted web access
  • Nokia tablet–too small, no rotation
  • iPhone and iPod Touch–great interface but even smaller (UPDATE: the new higher resolution display makes the iPod Touch 4g great for reading)
  • Netbooks–currently best–see below

Until a better device is released (like my E-paper idea or the oft-rumored Apple tablet), the best full computing experience for reading is a 9 or 10 inch netbook, in my opinion. For example, owners of an Asus EEE PC netbook with EEErotate and the Readability button installed, can read a web site as follows:

  1. Click on Readability button
  2. F11
  3. Control-Alt-RightArrow

The last step rotates the screen 90 degrees, which means the text display is similar to a book. To return to the original state:

  1. Control-Alt-UpArrow
  2. F11
  3. F5 (refresh)

The following screenshots show a New York Times article. The first image shows the article on a 24 inch monitor before any filtering. The next image shows two screen shots from an EEE PC 1000h netbook, after all three filters are applied.

Before: 24 inch monitor (no reading filters applied)


After: 10″ EEE PC after all 3 filters applied, pages 1-2

This combination is not as good as a paperback book. The netbook is far heavier, emits light, and takes three actions to get into a highly readable format, and another three actions to return to the regular browser window. But I’ve found it to be the simplest and most effective method for using a computer to read lengthy text off the web at this point in time.

The Future

Thanks to rapid innovation on several fronts, reading on the web could soon approach the experience of reading a book. E-paper displays are as easy to read as regular paper and are perhaps a year or two away from mass adoption.

While devices like the Amazon Kindle and the Sony Reader already use E-paper, they will likely remain a niche product if data access and connectivity continues to be purposefully restricting.  (NOTE:  Kindle connectivity has improved enough since this post was written that I bought one and wrote about it here)

Safari on an iPod Touch combines unlimited web access with a great interface for reading on the web. If Apple comes out with a moderately larger model, I think it would do for reading what the iPod did for music. If my print-to-E-paper idea becomes reality, that would be even better.

I know there are many other tricks out there to increase readability and reduce distraction. I’ve found most to be excessively complicated or not effective enough for the average person. Be sure to let me know in the comments if you’ve found anything as simple and effective as Readability, F11, and using a small screen.

Author: Joe Golton

I’m a dad with a son who loves baseball. Professionally, I’ve been a software developer, investor, controller, and logistics manager. I now make my living from this blog, supplemented with occasional consulting gigs.

10 thoughts on “Filters for Reading on the Web”

  1. Hi Joe,

    Reading your article made me wistful for F11 on my Mac. I was just looking around and found something I can do in 2 clicks. The result isn’t quite as good as F11 but seems worthwhile to me.

    When I click on a capsule shaped button in the upper right-hand corner of Firefox, the Firefox toolbars disappear. Then I can close the Bookmarks sidebar I keep open. The Mac interface elements are still there, but those 2 clicks eliminate quite a lot of distraction.

    I can also bring everything back with 2 clicks–first the capsule, then I click the Bookmarks button I have in the toolbar. I recall that this button was not a default button but something I added.

    Also, I just added the Readability button. I was surprised how easy it was. I think I did it less than a minute. I didn’t realize until I started clicking that their “Example” text allows you to preview what your choices will look like.

    Off to see how I like using these things…

  2. Thanks — never knew about F11. Looking forward to more info.

    Thought you’d like to know that at least on my computer, your blog’s name “Filter Joe” and the line of text under it overwrites the title and date of the day’s blog, making both at least partially unreadable.

    How about a button for posting a comment? Or did I miss it somewhere? I only found one after reading a comment — a level farther away and therefore less simple.

  3. Thanks very much for the feedback, Nancy. I believe I have now addressed all of your points (so this reply replaces my several prior replies with just this one comment):

    1) Unreadable FilterJoe: I forgot to test FilterJoe with Internet Explorer (IE6, IE7). The site looked terrible in IE6 and IE7 (you were using one of these, right?), as these versions of Internet Explorer do not follow all web standards. I have made the needed changes, so FilterJoe displays properly in IE7 and IE8. There are still some idiosyncrasies on IE6 (most notably the weird looking banner and menu action) but I’m giving up on that for now – it’s passable and IE6 is in rapid decline as people migrate to more modern browsers. The site looks fine on the latest versions of the top 5 browsers.

    I will be writing an article in the future about browsers but here’s one tidbit now: Upgrade to a modern browser! IE8 is quite good, and so are the latest versions of Firefox, Chrome, Safari, and Opera. Older browers (most especially earlier versions of Internet Explorer) are much slower and may have problems displaying web sites created in the last year or two.

    2) Comments: I changed the site so that the home page now only displays summaries. The user can click “Read More” to go to the post, at the end of which is the comment box (before, people would read all articles on the home page, and therefore never see the comment box).

    Thank you ever so much for your comment – prior to your comment, most Internet Explorer users left FilterJoe less than 20 seconds after visiting for the first time, for good reason. The average visitor stays for at least 5 minutes. In the future, I’ll be careful to view FilterJoe on all 5 major browsers after any change I make.

  4. Joe,

    Thanks for the suggestions. Here are a few for Mac users:
    Safari 3.2.1– “Readability” works fine
    – must be runing Mac OS 10.4+ to have this version of Safari
    – not sure about previous versions
    – unfortunately the upper right hand “oval” (hide show top and sidebars) is non-existent in Safari (quite odd b/c Apple introduced this functionality).

    Karin thanks for your Mac Firefox suggestion.

    It would be nice to have more Web 2.0 features in writing the comments such as WYSIWYG editing features so I might be able to indent and create bullet/ordered lists.

  5. Gordon – Thanks for sharing the results of testing Readability on Safari. I just discovered that there are a number of plug-ins available for Safari that provide additional features. Full screen mode and other features are added with the plug-ins Saft and Glims. I would greatly appreciate if anyone who has used either of these plug-ins could comment on how well the full screen mode works. (UPDATE: Starting in October, 2011, the Saft plug-in web site is no longer on line, so I’m guessing Saft is no longer supported. Also, note that Safari now has a built in Reader button that reformats web pages for easier reading).

  6. I have also found a User-Script called Multi-Column Articles very, very useful. FireFox only. Plus you have to install GreaseMonkey first, to get the userscript to run. (Not a big deal, installs easy.)
    It takes “Printer Friendly” pages from news sites like the NYTimes and does multi-columns and pagination. Terrific.
    This script changed the way I read the Times and I became a more frequent FireFox user as a result.

  7. Moving a text-only version of a web page to an E-paper device for portability and easy reading has really got me thinking.
    It can definitely be done but I’m trying to envision how it would happen with just a click, and then proceed invisibly in the background while the user continues to work.
    I own the IRex 1000S e-Reader, with the largest E-paper screen
    available. I would love to have this capability. And an open architecture that allows me to import anything into the device.
    I promise a report back on this.

  8. Richard – perhaps using the printing driver mechanism makes sense for interfacing between a computer and e-paper, as that is an interface people are used to and I’m guessing that from a software standpoint, there’s not a whole lot of difference between printing to real paper and printing to e-paper. Also, there already IS one limited form of “print to e-paper” but it only works printing to iphones (or iPod Touches) and is really more intended to be a “read it later” type of service, not read it instantly. But it’s a step in the right direction. See

  9. I too love Readability. I also use Instapaper and Google Reader. I also find using Nocturne helpful for making reading more focused when on a Mac.

Comments are closed.