disruption.ca

I’ve been learning a bit of CSS for work. So I took my png2html code and used it to create a script that renders an image as CSS boxes.

Example CSS rendered image.

Unfortunately, it doesn’t work quite as well as my table rendering code. Internet Explorer doesn’t want to draw boxes less than 1 em in height, and I can’t get it to position the boxes relatively. It does render correctly in Safari and Firefox though.

Another disadvantage compared to the table images are significantly larger file sizes. Also, I have put less effort into creating standards compliant, validateable html.

With additional effort perhaps the css code could be better than the table code, but this project hasn’t held my interest beyond simply getting it to work.

Here is the ugly png2css perl script.