Hacker News new | comments | ask | show | jobs | submit login

For SVG to truly rise, it needs better font/text support. It should be easy to programmatically determine the width of a string of text in a given font. Unfortunately, it is not. You can go look how libraries like D3.js do it. But ultimately, pixel-perfect text with SVG is difficult/impossible. I'd really like to know if I'm wrong about that.

On the positive side, ReactJS plays great with SVG. I'm working on some basic line charts that I want ReactJS-managed so I can render them server-side too. My line chart isn't done but I tried the server-side rendering and it's working great.




Indeed. I just noticed yesterday that the text labels in an svg graph I'd created are changed in size by the Firefox browser. They were too big and overlapping things! Huh? Lowering my "minimum font size" pref fixed the issue.

A great way to "snatch defeat from the jaws of victory," re scalable graphics.


textElement.getBBox().width and textElement.getBoundingClientRect().width should give you the text width in user and client space.


Have 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.


That's interesting, the computed bbox seems to be slightly off on Chrome when I apply "italic" font style.


When 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.




Applications are open for YC Summer 2019

Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: