The Box Office : Automating a time-consuming job

Mike from Mikeindustries has launched his second iPod Giveaway.

Hurray hurray … but why I am then talking about “the box office” and “automating a time-consuming job”?

Let me start at the beginning. At the iPod giveaway page Mike uses a nice trick: the usage of empty div’s so that the text is aligned next to the countour of the image:


You, you don’t see the divs cos’ they just are empty. Using a handy Bookmarklet called topo with borders we can make them visible though:


When looking at the source, you can see that Mike has put loads of work into it … always creating div’s with the height set to the line height of the text (17px in his case) and then stretching it out.

Since I am lame at doing stuff manually, the idea of creating a program that automates this popped up into my head.

1 hour and some cursing later, “The Box Office 0.1” was put to the test and considered rather okay for a 0.1 🙂

The program reads in an image file that you specify, along with some parameters:

  • the used line-height
  • the color that is considered as ignorable
  • the position where to float the divs

In Mike’s case the line-height is 17, the ignore-color is #FFFFFF and the position is left, cos that’s where the actual image is.

So I’ve created myself a (very ugly) test image and let “The Box Office” do it’s job.


And yes, the following code popped out:



When placing all that code into testpage, one can see that the result is quite the wanted effect! 🙂

Screenshot of the testpage, with the text highlighted.

So why is this program still 0.1 and not available for download?

Plain simple:

  • the ignore color option doesn’t work yet (currently it is fixed to #FFFFFF)
  • the float param doesn’t work yet (currently it is fixed to “left”), although it’s only a minor adaptation to make it accept “right” too (the loop just has to go backwards)
  • Only works with images that don’t have the ignore color as first vertical row per bar

This last item can actually be ignored a bit, since the program does like over 90% of the job. You then can manually adjust it by messing in the generated code, or by using your favorite editor 🙂

So far my talking about this, expect more soon 😉



Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.