Add non monospace font, tab space in container, etc...
So how does one derive the width of a text string to be displayed in the container... in em (not px).
This can be useful on devices / website that change the font often. Hence there is no need to "redraw" the size (using the insert, measure, remove) method on every re-size. Some of which has no event to trigger/watch.
Manually using em work so far... the problem is making it automatic. As even jQuery.width() returns its result in px.
You can convert px into em. Remember the formula:
var em = px / fontSize;
So, if you have a pre element with the font-size set as 1em which is usually 16px, and your width in px is say 800px, then your width in em is 800 / 16 or 50em. Hope that helps. Vote for my answer if you found it useful.
Not perfect, but gets the job done (somewhat) [uses jQuery]
// [div] : a dom node to test insertion of string (inherits its css prop too)
// [str] : the string to test against
function getEmLen( div, str ) {
var oriInner = div.innerHTML;
var res;
div.innerHTML = '<a>'+str+'</a><a>m</a>';
res = Math.ceil( 100 * (jQuery(div.firstChild).width()) / (jQuery(div.lastChild).width()) ) / 100;
//the * 100, / 100 is to remove long trailing divides
div.innerHTML = oriInner;
return ''+res+'em';
}