Submit Hint Search The Forums LinksStatsPollsHeadlinesRSS
14,000 hints and counting!

Convert pixels to ems in BBEdit for elastic CSS layouts Apps
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:
  • Xem = 0.083333 * Xpx for 75%
  • Xem = 0.0715 * Xpx for 87.5%
  • Xem = 0.0625 * Xpx for 100%
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.
    •    
  • Currently 1.00 / 5
  • 1
  • 2
  • 3
  • 4
  • 5
  (1 vote cast)
 
[19,847 views]  

Convert pixels to ems in BBEdit for elastic CSS layouts | 6 comments | Create New Account
Click here to return to the 'Convert pixels to ems in BBEdit for elastic CSS layouts' hint
The following comments are owned by whoever posted them. This site is not responsible for what they say.
Convert pixels to ems in BBEdit for elastic CSS layouts
Authored by: nat1on on Dec 01, '05 08:11:59AM

I found this hint useful, thanks!



[ Reply to This | # ]
Convert pixels to ems in BBEdit for elastic CSS layouts
Authored by: Echidna on Dec 03, '05 06:12:01PM

You're making life too difficult for yourself! If you use font-size:67.5%, then 1em=10px.

I'd much rather divide by 10 than any of those other coefficients you worked out :)



[ Reply to This | # ]
Convert pixels to ems in BBEdit for elastic CSS layouts
Authored by: Echidna on Dec 03, '05 06:32:06PM

Cripes I wasn't thinking. It's 62.5%.



[ Reply to This | # ]
Convert pixels to ems in BBEdit for elastic CSS layouts
Authored by: xth on Dec 05, '05 03:06:45AM

Yes, but then the font would be too small!



[ Reply to This | # ]
Use ex for vertical dimensions ?
Authored by: VRic on Dec 05, '05 05:08:00PM

Notice that 1em is the width of the uppercase letter M in the current font, which is a good way of sizing horizontal elements to make sure they grow/shrink nicely with the text instead of messing up line wraps.

BUT:

- it is less appropriate for vertical dimensions, where ex should be used instead (1ex is the height of the lowercase letter x). Otherwise zoomed elements' proportions relative to the text will change, which can be bad.

- it's much better than fixed design, but it won't magically solve everything, because the text's font and size can change everywhere in the page's content.



[ Reply to This | # ]
Use ex for vertical dimensions ?
Authored by: xth on Dec 10, '05 05:53:37AM

So far ems have always seemed to work for me, but what you are saying is correct.



[ Reply to This | # ]