4 ms·
textElement.getBBox().width and textElement.getBoundingClientRect().width should give you the text width in user and client space.
by jarek-foksa 11y ago
textElement.getBBox().width and textElement.getBoundingClientRect().width should give you the text width in user and client space.
- Cymen 11y agoHave you tried them though? Now check it out with kerning and/or italics. Do you see overhanging when you draw the rectangular box found via the API? Good example is strings that end with a character like f. Works in theory. In practice, it does not. That is what I found but again, I'd be happy to be wrong.
- jarek-foksa 11y agoThat's interesting, the computed bbox seems to be slightly off on Chrome when I apply "italic" font style.
- Cymen 11y agoWhen working on it a year ago at another employer, we had a list of edge cases. I don't recall them all but some were off by quite a bit. Enough so that the work around was to do everything in SVG except text and use plain DOM position on top for text. That was a bit better. It would be wonderful to do everything in SVG.