Daniel T Ott » Home

Thoughts

“I could while away the hours, conferrin’
with the
flowers, consultin’ with the rain…”

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:

pixel2em

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.

11 Responses:

  1. Bradford Dielman -

    Cool bookmarklet, Dan. Put it to use a couple of times already. Keep ‘em coming. ;)

  2. Bloomington Startup » Blog Archive » Requesting chatter from local bloggers -

    […] 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. […]

  3. Dennison Uy - Graphic Designer -

    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.

  4. CSSnewbie -

    This is a pretty awesome bookmarklet! You’re obviously a man who knows his ems… this website scales beautifully. Kudos!

  5. CSSVault Blog » Blog Archive » Pixel to EM Conveter Bookmarklet -

    […] Ott has come up with a handy tool for converting pixels to EMs. Forget about using the headaches of manually using a calculator and […]

  6. Rowan -

    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.

  7. ) design collected ( :: links for 2008-02-24 -

    […] 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) […]

  8. Dave Sutula -

    It doesn’t work in IE6 !? How odd. I’ve never heard that before:)

  9. Dan -

    @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.

  10. Josh Walsh -

    This is such a simple solution to a problem I deal with everyday. Thanks for making me a little lazier. Brilliant.

  11. Валид -

    Огромное спасибо

Got Something To Say?


(required)

(required) (will not be published)

(you can use these tags→)
<a href="" title=""> <abbr title=""> <acronym title=""> <b>
<blockquote cite=""> <code> <em> <i> <strike> <strong>