Has anyone used a library that calculate the pixel width of a text base on font and font-size?
The only library that could give you an accurate answer is the same library you used to draw the text in the first place. Different text rendering libraries will render it at slightly different sizes so you cannot trust anything other than the text rendering library itself.
I guess I just have to approximate then, and use fonts that are as close to monospace that still looks good.
You should mention which platform/graphics library you are using.
For Windows, there are a number of different API calls that you can use. One of them is GetTextEntentPoint; there are several others.
I imagine QT, GTK, Cocoa, or whatever graphics API/platform you’re using will also have such methods.
I assume that you are doing this for SVG. I had to figure this out as well in a personal project I’m working on. These are the steps I followed (for a OpenType font):
- Get the UnitsPerEm measurement of the font.
- Get the AdvanceWidth for the specified glyph.
- Convert the
AdvanceWidthto EM with the
- Multiply this result by the font-size in
pxto get the advance in
Be sure to disable kernining while doing this, since this calculation doesn’t take kerning into account. You can get the
AdvanceWidth from the OpenType create (though the documentation is not quite there, and there are some limitations if you are looking at exotic fonts). These measurements look something like this:
Do note that the boxes displayed are not bounding boxes. Bounding boxes would hug the glyphs tighter, these are the boxes constructed from the
AdvanceWidth. Also note, that this will not be perfect, some browsers are weird like that.