The Box Office

WARNING: This project is no longer updated, and unsupported. It is kept here merely for archiving purposes. You should check out my most recent projects on Github

“The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in (X)HTML pages.”

The idea behind it all was conceived when analyzing a newspost at Mike Industries where Mike contoured some text around a background image like so:

Snap of the newsitem

The technique behind it, is to create loads of empty div’s with the same height as the used line-height.

Using a handy Bookmarklet called topo with borders we can make them visible though:

Snap of the newsitem

Doing this all manually time after time for every new image discouraged me a bit so I started scripting a program to automate all this

A first version was created in C#, and then later on ported to PHP so that all webdevvers (read: non-Windows webdevvers) could benefit from this tool.

The result can be seen over at, along with some examples and an extended about page.

Join the Conversation


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.