Hacker News new | ask | show | jobs
by moqups 4813 days ago
At Moqups ( https://moqups.com ) we've been through a very painful process of trying to implement a word wrap component in SVG and after a few months decided to throw it out and use foreignObject. We decided that it's impossible to be able to cover the thousands of text handling scenarios for all the languages and scripts out there and the performance makes it very unfeasible beyond a few hundred words. With few exceptions related to measuring text across browsers/operating systems, this was a very good decision.

Sadly it's also the main reason for why we're not planning to support any version of IE moving forward although many users request it.

Slightly unrelated, but I'm also happy to see getStrokeBBox in there. It's been a total pain to manually compute the stroked bbox of each stencil so the layout engine can properly arrange each element in respect to its painted area.

1 comments

I actually implemented a very primitive word wrap function specifically for wrapping text in SVGs about two weeks ago. I took the approach of keeping an single canvas object in memory (completely detached from the DOM, 1x1 pixel dimensions) and using its "measureText" method for calculating string lengths. This made the algorithm fairly simple, and if you set the font on the canvas context correctly, the results will actually be fairly accurate -- though you might have to take into account any scaling that you have applied on the SVG.

This approach did not cause any noticeable change in performance, at least not in my use case where there are at most around 100 nodes of text that needed word wrapping. I can't really compare it with other approaches since I saw no need to take multiple stabs at the problem when my first attempt proved to work well enough. I would guess that it might be faster than actually creating SVG text elements and then trying to get their widths since you're eliminating a lot of overhead in the pre-calculation phase. Also, as far as desktop browsers go, anything that has SVG also has canvas, so there were no worries there about browser compatibility issues.

EDIT: But yeah, I'm just mentioning this in case you find some use for it. Looking at your link I would say you're much better off just using foreignObject.