Convert pixels to ems in BBEdit for elastic CSS layouts

Dec 01, '05 05:46:00AM

Contributed by: xth

This will probably only be of interest to a few people -- namely web developers who use BBEdit and elastic layout techniques. I have written a little AppleScript to convert pixels to ems measurements from within BBEdit.

Elastic layout techniques boil down to using ems instead of pixels for measurements in your style sheets, so that when users change the font size, the whole page 'zooms' in and out. A good way to set that up is to set a default font for the page, then convert all pixels measurements to ems. I set default font size like this (other methods are possible):

body	{font-size	: 75%; ... }
body	*	{	font-size	: 1em;}
The percentage in the font-size can be 100%, 87.5%, 75%, to set the default font size of the page to 'medium', 'small' and 'smallest,' respectively. These are the only percentages that work in the 100 to 75% range -- there are probably smaller and larger percentages that work too, but I've never had to use them.

To convert pixels measurement Xpx to em measurement Xem, you multiply them by a factor (which depends on the default font size). The conversion factors are:

For example, margin : 10px; becames margin : 0.8333em; if the default font size was set to 75%. You need at least four decimal places to make sure measurements are the same in all browsers.

The script: This simple script converts a number to the left of the cursor to its ems equivalent, followed by em. There are three version of the script, which are identical except for the conversion ratio at the beginning: To use them, save them to the folder [your home] -> Library -> Application Support -> BBEdit -> Scripts. In BBEdit, make sure the script palette is displayed (Window: Palettes: Script).

In the palette, select the script which matches the default font size you set, then click on 'Set Key' to set a shortcut for that script -- I use ctrl-E. After that, you can close the palette. Now you'll be able to type, say width : 25[control]-E and BBEdit will convert it to width : 2.0833em.

Comments (6)


Mac OS X Hints
http://hints.macworld.com/article.php?story=20051124024622502