thenew.oddend.com

Since this site is both my personal outlet and experimental lab, I've been altering my stylesheets to allow the entire layout of the site to be scaled. The changes I made previously are roughly outlined in this article. One thing that refused to scale in browers other than Internet Explorer 7 (and probably one or two others) were the images.

I decided to brush up on my javascript a bit and cook up a script that would calculate and insert em values based on the width and height attributes of the images I use in my articles. Although it's a rough first version, it turned out better than I expected.

The plan

The concept is simple. In my stylesheet I define a base pixel value for the font-size of the body. In my case, that's 13px. Most other sizes in my stylesheet are set in em, based on that 13px value. The one thing that those sizes have in common is that they can be pre-calculated, the sizes of the images I use in my content are always different.

What the javascript does is find all the images within my content div, that's where the bastards are hiding. Once I find them I loop through them, grabbing the width and height from their attributes (if they have them). Then I calculate the em equivalent based on that 13px value, i.e. 200px equals 200 ÷ 13 = 15,384615384...em. To keep things tidy, I limit the decimals to 3, resulting in 15,385em. Then I simply add extra width and height style properties in em to the image in question.

Let's see some script

Here's the function that makes it happen (note, this is not the complete script):

Demo

The image on the right will scale up and down when you press ctrl and + or ctrl and - (use ctrl and 0 to reset). Internet explorer 6 won't do a thing, while Internet explorer 7 will use it's zoom function which makes the script obsolete anyway. The downside of the script is that it kicks in once the document has fully loaded. Images will keep their original size until that moment.

Obviously it is essential that the image has a width and height property, without it there's nothing to calculate and the script will simply skip the image. Unfortunately Wordpress doesn't automatically add these attributes but I have gotten used to adding them as my PNG alpha fix for Internet Explorer 6 requires me to do so.

Changelog

30 March 2007 Changed a flaw in the logic and check for attributes using the getAttributes return value directly.
29 March 2007 Removed hasAttribute usage, not supported by MSIE 6.
28 March 2007 First beta release.

Download

I've mentioned this before and I'll say it again, my javascript skills are nothing more than basic. However, if you want to download the whole script, including the addEvent stuff to let it do its magic once the document has loaded, go right ahead.

Download imageSizesToEm-v0.4.js

Final thoughts

The resized images come out rather rugged as I am doing nothing but altering the display size regardless of the image's original size. It would be wonderful if future browser versions would implement some basic resampling, but alas.

If you take this script and improve it in any way, do let me know. I'm curious about what your javascript wizardry can do and how you put it to work. Do use it with caution, I have not tested it anywhere but here and only in Firefox 2 and Internet Explorer 7 on Windows XP.

Next up: finding a way to handle the size of images set as background of an element using css. Right now overflow:hidden is used for some damage control in my header at smaller scale.