Portland Web Development™

First off, if you don’t know, kerning is defining the space between two letters. Tracking is defining the space between all letters in a line. And finally, the em (pronounced as if you were to say the letter ‘m’, I was just saying E M for a while) space measurement is exactly that, it is the space taken up by the letter m in that particular font. It’s a very relative measurement.

Here’s a conversion table to help explain.

Seems like splitting hairs doesn’t it? I’ll explain.

If you have css code that specifies the letter spacing in px. Your letters will always be that many pixels apart from each other.

If you spicify a certain amount of em space, they will expand proportionally as the user makes the text bigger. So in theory, the page and text will look exactly the same no matter how big it is, assuming you are dynamically resizing your divs (or tables).

I personally prefer to use pixel measurements and restrict the user’s ability to re size the text on the page. Nevertheless, when interacting with design folks who are involved in predominantly print media, you’ll run into these and you’ll need to know how to apply them to the web.

All I can say is wow…  The difference between animated GIFs and animated PNGs is like the difference between a ball mouse and an optical.  This has incredible implications for interactive design as you could be able to but non-vertex based effects on your page with incredible clarity. I’m going to see if I can get this technology to work in ie6 using the method in my previous post of transparent PNGs in IE6.

For a long time I have been avoiding transparent PNGs because of one browser that is, sadly, still one of the most widely used (as of now, October 2008). Of course I am talking about IE6, the maverick.

Recent project requirements forced me to find an answer to this problem.  I must not have looked very hard before, because this solution was not hard to find. The solution is at ie7-js and the implementation is even more staggeringly easy:

Wow! That’s easy! I, however, opted to download the ie8.js and blank.gif file directly to my client’s website for performance and reliability factors.  At any rate, it worked like a charm! That is, after I read a not-so-obvious part on the google-code page that says every picture you want changed needs to have a -trans suffix added to the filename in the img tag.

Other than that, I am very excited about the possibilities this advancement has brought to current and future projects. Enjoy!