Retaining scalable interfaces with pixel-to-em conversion

Why Ems, Anyway?

In CSS layouts, ems are often used in place of pixels to allow elements and text to scale in unison. Although pixels tend to be easier to use and more precise, many browsers such as Internet Explorer can not scale text that is set in pixels. By using ems for not only our text, but also the heights and widths of structural elements, we can allow parts of the page layout to scale in proportion to the text size.

How do they work?

In brief, an em is a relative unit that is equivalent to the height of a font. Since most browsers' default font size is 16px, we can assume that 1em is equal to 16px; meaning that 12px is equal to 0.75em, and 10px type is equal to 0.625em. As you can see, it can be quite tedious to calculate em values this way, and luckily a method was developed by clagnut to alleviate the problem. By simply setting the body element's font size to 62.5%, the value of 1em becomes 10px. This allows for nice and easy calculations to ems by simply dividing a pixel value by 10.

The inconveniences of using ems do not stop there however, since the value of 1em can vary depending on parent/child relationships in the DOM. For every element on the page, the value of 1em is calculated based on the font size of its parent element. This means that while a paragraph may have a font size of 1.2em and appear to be 12px tall, all of its children will exist in a world where 1em is equal to 12px instead of 10. This sounds like a similar situation to where we started.

Where Ems are Often Abandoned

As confusing as managing an em-based stylesheet might get though, it usually doesn't cause any major setbacks to web developers. We find that the problems more often occur when elements are inserted or modified with javascript. During animation effects or modifications to the DOM, many javascript libraries style elements using pixels to avoid the possibility of conflicts. While pixels are often desired and are a good default, we usually want our modifications to fit within a scalable interface. For this reason, we've come up with a method that converts pixel values to ems on the fly, and always calculates within the scope it is given.

So how does it work?

When called, pxToEm converts a given pixel value to ems. By default, it uses the body's font size for scope, but a scope property can be passed to handle conversions that are relative to another element's font size.

Sample Output:

var pixelValue = 256; 
var emValue = pixelValue.pxToEm(); 
==> returns '25.6em'

The sample above may look like a simple division of 10, but the script actually checks the font size of the body before calculating so it will work in many environments. To demonstrate how scope is used, consider the following example which uses a scope property.

Sample Output Using a Scope Element:

var pixelValue = 256;
var scopeElement = $(myElement); //element being used for scope. It has a font size of 14px.
var emValue = pixelValue.pxToEm({'scope': scopeElement}); 
==> returns string "18.29em"

We can see that pxToEm has used the font size of the scope element for its calculation above. Using a scope parameter would be useful for figuring out dimensions when inserting an element into the scope element.

But What About Ems to Pixels?

Don't worry, we didn't leave you hangin'! A second optional property called 'reverse' defines the direction of the conversion. Simply pass a reverse parameter as true and pxToEm will convert your value to pixels. The following calculator demonstrates the flexibility and capabilities of this plugin.

Demo Calculator

Sweet! How do I use it?

First, you'll need to be using the jQuery javascript library, which is free and can be downloaded here: jQuery.com. Then grab one of the javascript files linked below and either paste its contents into your javascript file or link to it as a standalone.

Syntax and options

Unlike a jQuery plugin, pxToEm is a string/number method and is not meant to be applied to a jQuery object. Instead, you will apply it as a method on a variable that references either a number or numeric string. pxToEm has defaults that can be overridden via the options argument. These settings should be passed in as an object as shown below:

myValue.pxToEm({
   scope: 'h3',
   reverse: true
});

Available Options

• Scope: jQuery object or selector string, defaults to 'body'
• Reverse: Boolean, defaults to true

Download it!

• pxToEm.js