Convert Pixels To Ems – A Bookmarklet
Recently, I was writing a Javascript app that involved some animated, expanding boxes. While doing this, I realized I needed a way to dynamically convert pixels to computed ems. The function wasn’t too complicated, and so I decided to make a bookmarklet out of it that did the same thing. It was kind of fun. Hopefully you’ll find it useful, either in javascript, or to remove the headache when you’re trying to create pixel-perfect designs using ems
The Function
So, here are the functions:
//this function returns the computed pixel value
//of 1em relative to the given element
function getComputedEm(el){
var tdiv = document.createElement("div");
tdiv.style.height = "1em";
tdiv.style.position = "absolute";
tdiv.style.backgroundColor = "#f00";
el.appendChild(tdiv);
var emValue = tdiv.offsetHeight;
el.removeChild(tdiv);
return emValue;
}
//this function takes an integer, and a javascript element.
function convertPixelsToEms(pixels, el){
var emval = getComputedEm(el);
var value = pixels/emval;
return Math.round(value*100)/100;
}
The Bookmarklet
And here’s the bookmarklet:
Just drag the link above to your menu bar, and click on it in any site. The bookmarklet will appear at the top of the page. It takes a pixel amount, and any css selector you can think of, so it will return the conversion relative to an element. For example, on this site, if you use “body”, 16 pixels = 1.14em, but if you use #content p, 16 pixels = 1.23em.
It’s probably not perfect, so please let me know if things aren’t working correctly. Although, I can tell you right now it’s not going to work on ie6, so don’t bother trying it there.
The bookmarklet makes use of Dean Edward’s cssQuery, a slick little script to retrieve elements based on CSS selectors.
All in all, this was a fun experiment, and I hope you find it useful. Have fun.
Bradford Dielman (on January 20th, 2008 at 4:43 pm ) -
Cool bookmarklet, Dan. Put it to use a couple of times already. Keep ‘em coming. ;)
Bloomington Startup » Blog Archive » Requesting chatter from local bloggers (on January 27th, 2008 at 6:30 pm ) -
[…] I am challenging local bloggers to help our event out by posting something about our event this week, encouraging people to register or follow our activities at City Hall on February 8-10. We want to make sure Bloomington knows about this, even as we wait for the Herald-Times and IDS coverage. […]
Dennison Uy - Graphic Designer (on January 31st, 2008 at 11:28 am ) -
For a moment I thought nothing was happening until I noticed the dark brown box at the top left corner. Maybe you can change the color and place the box at the center of the screen to make it more noticeable and just enable dragging.
Other than that excellent script, this will be very handy for CSS development.
CSSnewbie (on January 31st, 2008 at 12:31 pm ) -
This is a pretty awesome bookmarklet! You’re obviously a man who knows his ems… this website scales beautifully. Kudos!
CSSVault Blog » Blog Archive » Pixel to EM Conveter Bookmarklet (on February 11th, 2008 at 10:59 am ) -
[…] Ott has come up with a handy tool for converting pixels to EMs. Forget about using the headaches of manually using a calculator and […]
Rowan (on February 16th, 2008 at 3:55 pm ) -
Thanks very helpful. One improvement I would suggest is to not round up the value, or at least not up to 2 decimal places.
You can see from the source code on an example using ems to maintain the same line-height for all elements on a page the em value can reach up to 4 decimal places.
) design collected ( :: links for 2008-02-24 (on February 24th, 2008 at 4:02 am ) -
[…] Bookmarklet: Convert Pixels To Ems (Daniel T Ott) The bookmarklet will appear at the top of the page. It takes a pixel amount, and any css selector you can think of, so it will return the conversion relative to an element. (tags: CSS, bookmarklet, ems, pixels) […]
Dave Sutula (on February 28th, 2008 at 2:08 pm ) -
It doesn’t work in IE6 !? How odd. I’ve never heard that before:)
Dan (on March 15th, 2008 at 3:52 pm ) -
@everyone - Thanks for stopping by and commenting. I’m glad you appreciate this tool.
@Rowan - Thanks for the tip. I’ve adjusted the Javascript accordingly.
Josh Walsh (on June 22nd, 2008 at 2:28 pm ) -
This is such a simple solution to a problem I deal with everyday. Thanks for making me a little lazier. Brilliant.
Валид (on May 22nd, 2009 at 10:10 am ) -
Огромное спасибо