Dec 01, '05 05:46:00AM • Contributed by: xth
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:
- Xem = 0.083333 * Xpx for 75%
- Xem = 0.0715 * Xpx for 87.5%
- Xem = 0.0625 * Xpx for 100%
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.
