Measure ex in px in Javascript

Question

What I want to do

I would like to measure the 1ex in px.

What I have learned

• 1ex is a relative unit -- equal to the height of lower case "x" of the font in use:

An instructive image describing the situation:

link to CSS spec:

http://www.w3.org/TR/css3-values/#font-relative-lengths

• window.getComputedStyle('foo',null).height or jQuery('#foo').height() does not help -- because they return the height of its bounding box. e.g.

  <div id="upper"> X </div>
  <div id="lower"> x </div>
  <script>
     var upper = $('#upper').height();
     var lower = $('#lower').height();
     console.log(upper === lower);
  </script>
  

  The last line gives true.

• Related pages, but not fully informative to me:

  • jQuery/JavaScript: convert pixels to em in a easy way

  • How do I get a computed style?

  • JavaScript: convert ex to px

Any information is appreciated!

EDIT:

Some people suggests that this is a dupe of

JavaScript: convert ex to px

but there are NO ACTUAL answers: The first answer explains only relativity of 1ex and the second one is even wrong -- document.getElementById('upper').style.height returns "" // empty char.

Answer 1

Best way I can think of:

• Fill a canvas with white
• Draw the letter on the canvas in black
• Measure the vertical distance between the first non-white pixel to the last non-white pixel

You should be able to achieve this using getImageData.

Alternatively you could also try using the canvas method measureText which should return the width of the text string passed in. Considering x is often quite symmetrical, you could get reasonably accurate results with just that.

Answer 2

Here is what the current CSS spec says about ex unit:

Equal to the used x-height of the ... font. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ‘ex’ is defined even for fonts that do not contain an "x".

The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed.

So 'x-height' doesn't have to do anything with the actual character "x", it's just a font metric, either stored in the font file or calculated by the browser. And the best way to measure it, IMO, is to create a test block with the same font properties, set to it, e.g., width: 10ex and then measure its clientWidth (or jQuery's width()).