Unnaturally Long Attention Span

AvatarA blog about Grad School at Stanford, Working in a Silicon Valley Internet Company, and Statistical Machine Learning. mike AT ai.stanford.edu

LED Letters!

Want to use a cool LED-looking font while fooling spammers? Read on..

The other day I was doing some work in Javascript, to try to fix some things in Diffbot, when I re-discovered a cool thing about element borders in HTML. Adjacent borders actually come together at a 45° angle in most browsers. Here's what I mean:

This is a div element with borders.

Now, if you take two of these blocks and simply stack them on top of each other, you get a pattern that resembles the LED "8":

.
.
Like its circuit-based cousin, these HTML LEDs consist of seven parts, which can be turned on or off to create a variety of characters. Having spent countless hours in the circuits lab during my undergrad working with these dreaded LEDs, I realized that now you could design an entire display system using this as a base--you could go as far as creating a scrolling stock ticker! I wrote a quick Javascript demo that turns any text into this form. To try it out, simply include led.js (less than 2k) and the following call to your html <body>
makeText("hello", parentElement);

Below you see an example output:




Try to select the above "hello" with your mouse--it's neither an image nor text.

The interesting thing about this is that you can use it to make text without actually having that text in the source code. This is great for preventing crawling robots and spammers from reading your text, while still allowing your human readers too see things fine. Some applications of this might be to cloak or email address, generate CAPTCHAs, or to do evil search engine optimization by hiding text from Googlebot. This method might be better than the straightforward method of rendering your text as images because it requires the robot/spammer to have
  1. a javascript interpreter/browser
  2. the ability to snapshot/render a certain region of the screen
  3. Optical character like recognition capability
The image rendering obfuscation method, on the other hand, only requires #3. Obviously, a specific implementation can be defeated by reverse-engineering the html/javascript without these three components, but the resulting spamming algorithm would be implementation specific, which would not scale well for the spammer.

1 comments:

8:15 AM, March 03, 2008 Dave Ryder said...

uh, that is REALLY cool

my first two thoughts were, "huh" followed by "wow"