Javascript: Measure those “em”s for your layout
For many of us designing fluid layouts, which are generally based in “em”s (pronounced like the letter M) you end up not really knowing how many pixels an “em” is while you are deep in the DOM tree. This is especially confusing if you increase/decrease text size with your browser.
For this reason, I have created a simple Javascript function that you can use to poll any element on your test page and figure out what size an “em” is.
The Javascript code:
function getEmSize(el) {
// If you pass in an element ID then get a reference to the element
if (typeof el == "string") el = document.getElementById(el);
if (el != null) {
var tempDiv = document.createElement("DIV");
tempDiv.style.height = 1 + "em";
// Make a readable bar with the em measurement
tempDiv.style.background = "#FF9";
tempDiv.style.color = "#000";
tempDiv.style.paddingBottom = 4 + "px"; // This makes the DIV text readable
// Just in case the content of "el" takes up it's container's height :)
tempDiv.style.marginTop = -1 + "em";
el.appendChild(tempDiv);
// Remember to take off the 4px we added earlier
var emSize = (tempDiv.offsetHeight - 4) + "px";
tempDiv.innerHTML = emSize;
}
}
Explanation and Usage
This function will create a yellow bar below content within the element you pass in with the pixel value equivalent to 1 “em”. You can change it to print the value to the console by replacing lines 8-18 with:
el.appendChild(tempDiv);
console.log(tempDiv.offsetHeight + "px");
el.removeChild(tempDiv);
You can easily use this function by calling:
getEmSize("elementid");
// OR
getEmSize(elementReference);
from your navigation bar or Firebug console or of course within a loop traversing your entire DOM tree (watch out for those text nodes though!).
Caveats
You could improve this by implementing some CSS positioning to always be a the lower-right etc. of these elements. You could also use a loop as I said earlier and print out a nice DOM tree with pixel values. You could also have the function update a global variable while printing to console to prevent using document.createElement() so often (it’s costly).
I know that there are some improvements to be made here so I wanna see some in the comments! What other ways do you keep track of your “em”s in a fluid layout?
A 24 year-old programmer for
Impressive! I didn’t know this. Great work!
Thanks David. What would you change about it though? How do you measure the size of characters in your content or is there really even a need because simple designs should not have deep DOM trees?