Introduction

Secret is a Javascript library which provides the functions required for scanning an HTML document for certain characters, locating those characters on the rendered page and then displaying them in a rather fun Harry Potter style (the former parts might be more interesting for developers!).

Using Secret is very simple, type what ever you want into the text box below and hit the 'Show message' button - it will gather the characters from the page and display them in a mysterious way...

There are a few things to note here - firstly you will need a fairly modern browser in order for this to work. Opera works a treat, as do very recent builds of Webkit (after 20th Feb 2009). Firefox also mostly works fine although it appears to have a slight offset in it's calculations for the position of characters (bug filed - vote for it!), and I've not bothered trying to support IE (Secret is open source if you want to give it a go...).

Another point to note is that if Secret can't find a character on the page, then it will signal a warning. For example if a page doesn't contain a 'Z' or 'P' etc. but your message requires it, then it can't be displayed. You can use my test page for Secret which contains most (but not all) standard ASCII characters. On this page you simply type your message and press return.

An alternative use for Secret is to use it as a bookmarklet. In this way, your message could be displayed on any page on the web. To do this, simply type your message into the box below and then drag the Secret button to your bookmark bar.

Create Secret bookmarklet (type text and drag button to bookmark bar):

In a similar manner Secret can be triggered however you like, secret codes etc. Download the source below and have fun!

So what's going on

The way Secret works is to firstly discover what HTML elements are currently displayed inside the browser viewport (it is preferable to take characters from the text which can be seen rather from any random point in the document), and read the text from each of the text nodes with in these visible elements. For each character in your message, Secret will scan through the text which has been found and randomly select one for display. If one can't be found then it would fall back to look outside the hidden areas as well, and finally fail if a suitable character can't be found.

Once a character has be found, its position in the document must be determined. Browsers don't provide a convenient method for doing this with text nodes, and specifically individual characters, so what Secret does is to wrap a 'span' tag around the target. From there the getBoundingClientRect() method can be used to determine its location.

After that, its a case of calculating where on the screen the character should be displayed, relative to the other characters in the string (line breaks etc. must be considered) and animating the element into position. The animation is provided by the YUI library, which made this animation exceptionally simple to implement (thank you to the YUI team!). The core of Secret is independent of any library so you can use that for any application you which, only the animation requires YUI.

Why?

It's a valid question! The main reason is for experimentation. I wanted to experiment with getting information from the browser about how it layouts out text, and also to have a bit of fun while doing so. Mission accomplished on both accounts.

Download

Secret is open source software (under the MIT license) and the source can be downloaded from the link below:

• Secret

If you do apply Secret to any interesting use case, please let me know about it - it's always good to hear how the software on this site is being used!