When using SVG in the Browser the browser has a getBBox
function to give you the bounding box of various elements. But when it comes to text elements it really confused me how this bouding box is calculated.
I know that fontsize is based on the em-Box which is specified in the font file.
However my tests show that none of these produce the same results as in FF or Chrome (which differ only a few px on fontsize 1000):
fontSize != bbox-height
(ascender-descender)/unitsPerEm * fontSize != bbox-height
(unitsPerEm-descender)/unitsPerEm * fontSize != bbox-height
...maybe adding a fixed amount to ascender for accents? Like Ć
So what is the secret behind the bbox height of text in browsers?
I even tried to look into the source code of FF and Chrome but finding the right place where the calculation is based is a challenge on its own
// EDIT: In response to the comment: I want to calculate the bbox of svg text as done in the browser (replicate the behavior). I need to know the metrics of the font which are needed to correctly calculate the bbox and the formular which is used to calculate the (width and height is sufficiant)
<text>
elements as part of an<svg>
block? (if so, being explicit about that is a good idea, too)