Often you will wish to draw attention to a particular elements on a web-page when you are discussing a particular page, reading detailed information, or giving a presentation. I have developed Reader for exactly this, and it has turned out to be an interesting adventure through Javascript events.


Reader is a Javascript bookmarklet, and like the other bookmarklets I have created, it is extremely simply to use on any web-page you wish:

  • Drag the Reader link below to your bookmark bar (or add it to your bookmarks/favourites by right clicking the link and selecting 'Add bookmark' / 'Add favourite'):
  • Load any web-page you wish
  • Click Reader in your bookmark bar
  • Move the mouse around the page and focus will follow. See below for more!

Reader has a number of configuration options which will ensure it integrates seamlessly with any web-site you view, and allow you to customise it to suit your needs. In this way Reader is very effective for highlighting information during a presentation, or simply for focusing your own attention on a complex page.

Reader focuses content by highlighting a the HTML element your mouse is currently focused over. This is done by placing a 'blocker' over all other content on the page, which has a high (and controllable) opacity. When Reader loads, it will automatically detect the background colour of the page that you are viewing and set it's blocker colour to match, ensuring seamless integration. As you move the mouse around the highlighted element on the page will follow.

The following keys can be used to control reader:

  • "Left arrow" - Decrease the opacity of the blocker
  • "Right arrow" - Increase the opacity of the blocker
  • "Up arrow" - Move focus to the currently highlighted element's parent.
  • "Down arrow" - Move focus to the first child of the currently highlighted element.
  • "Shift" - Enable / disable the border around the highlighted element.
  • "[" - Decrease the border size by one pixel.
  • "]" - Increase the border size by one pixel.
  • "Esc" - Quit Reader.

Reader will remember the settings that you select using the above key controls, so when you load Reader the next time the web-page your settings will be as they were (particularly useful for presentations). This setting memory is per domain, so you many have multiple different settings across the web!

The following browsers are supported with Reader:

  • Internet Explorer 6
  • Internet Explorer 7
  • Firefox 2
  • Safari 3
  • Opera 9.2
Article image

Elsewhere on the web