Is it possible to more accurately measure the height of SVG text?

Question

I am trying to measure the exact height used to render a given string with a given font with an SVG text tag.

I tried using getBBox and getExtentOfChar, but the height returned by both of them includes extra space above (and sometimes below) the actual text displayed.

http://upload.wikimedia.org/wikipedia/commons/3/39/Typography_Line_Terms.svg Using the terms in this image, I try to get either the header height + the descent height that will be visualized. Or, if this is not possible, just the height of the cap. Is there a good way to calculate these values?

Here is a quick code showing the extra space I'm talking about: http://codepen.io/pcorey/pen/amkGl

HTML:

<div> <svg><text>Hello</text></svg> <svg><text>Age</text></svg> </div> 

JS:

 $(function() { $('svg').each(function() { var svg = $(this); var text = svg.find('text'); var bbox = text.get(0).getBBox(); svg.get(0).setAttribute('viewBox', [bbox.x, bbox.y, bbox.width, bbox.height].join(' ')); }); }); 

I understand that this is a pretty font-specific thing, so it may be completely impossible ...

Answer 1

Not. All SVG DOM methods (getBBox (), getExtentOfChar ()) are defined to return the full height of the glyph cell. This is extra space above the height of the cap - this is a premium for higher glyphs - for example, accented capitals. I think this is also true for HTML DOM methods.

However, there are JS libraries around which may be useful. For instance:

https://github.com/Pomax/fontmetrics.js

I have not used this library myself, so I can’t say how reliable or accurate it is.