Convert Pixels To Ems - A Bookmarklet

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.

Comments (archived for posterity)

  • Bradford Dielman commented

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

  • Bloomington Startup » Blog Arc commented

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

    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 commented

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

  • CSSVault Blog » Blog Archive » commented

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

    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 commented

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

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

  • Dan commented

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

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

    Brilliant.

  • Tom commented

    I love the idea of your bookmarklet but I think it’s broken, the link to http://danott.dev/pixel2em/pixel2em.js is bad. I would love to try it out. Let me know if you get it back up.

    Thanks,

    Tom

    marklets.com

  • Dan Ott commented

    Hey Tom,

    Thanks for the heads up. The code didn’t survive the transfer to EE.

    It’s back up now, though(: