1

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)

4
  • What do you want to actually know? Because the text you've bolded is not a real question in any way. Browsers are complex applications that wisely use third party libraries for things like text parsing, using shapers like harfbuzz or freetype, which ingest strings bound to specific typefaces and return outline data and typesetting metrics. Apr 2, 2017 at 17:31
  • Well then the question is: Which metrics are used and how can i get them?
    – Fuzzyma
    Apr 2, 2017 at 17:38
  • Cool: can you update your post to clearly be that question? As well as explain exactly which metrics you need for what purpose so we don't end up with an XY problem? Apr 2, 2017 at 18:19
  • It would be much better if you just edited the question instead of adding the word "edit". People are going to find your question and expect to see what they need to see. No-longer-applicable text doesn't need to stay in the question (and in fact just makes things less clear). So can you just do a full question rewrite? Also is this is specifically about what the browser does when rendering <text> elements as part of an <svg> block? (if so, being explicit about that is a good idea, too) Apr 2, 2017 at 21:06

1 Answer 1

7

After lots of reasearch and tril and error I found a possible solution to at least explain chromes behavior of text bbox dimensions.

BBox Height

First of all I used the npm package fontkit to load and parse the fontfile. fontkit give you several metrics for the font in a whole which includes:

  • font.ascent
  • font.descent
  • font.lineGap
  • font.unitsPerEm

So to calculate the height of the bbox I figured the following:

bboxHeight = (font.ascent - font.descent + font.lineGap) / unitsPerEm * fontSize

However, that leads to errors when having a font which is bigger then the em box (font.ascent - font.descent > unitsPerEm). In this special case the bboxHeight is font.ascent - font.descent.

That leads to following code for the height:

var fontHeight = font.ascent - font.descent
var lineHeight = fontHeight > font.unitsPerEm ? fontHeight : fontHeight + font.lineGap
var height = lineHeight/font.unitsPerEm * fontSize

BBox Width

to calculate the width of the text I made use of the layout feature of fontkit. layout gives you access to the glyphs the text is drawn from and also access to the metrics of the glyph. The metric we need is the advanceWidth which includes the margins to other glyphs next to the current glpyh. By summming up all advanceWidths and scaling them accordingly I ended up with the bboxWidth:

var width = font.layout(text).glyphs.reduce((last, curr) => last + curr.advanceWidth, 0)
width = width / font.unitsPerEm * fontSize

BBox y position

Trouble does not stop here, we still have to calculate the y position of the bbox. Thats a rather simple formula:

var bboxY = y-font.ascent/font.unitsPerEm * fontSize

Where y is the theoretical position you would pull from the dom (y and dy attribute)


BBox x position

Thats just the figure you pull from the dom (x and dx)


Whole Box:

var box = {
    x:x,
    y: y-font.ascent/font.unitsPerEm * fontSize,
    width: width
    height: height
}

Hope it helps someone else!

1
  • Incredibly helpful. Thank you! Oct 10, 2020 at 5:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.