SVG textpath, determine when text goes beyond the path

Question

I have got the below code to display text along a path. I am planning to make sort of dynamic where I can just type in what i want and it displays it along the path. Haven\'

Answer 1

There is a trick to detect text overflow that works on Chrome: call getStartPositionOfChar on your textPath element for the first and last character indices (if there are such), and in case of an overflow the function simply will return an object which coordinates are the origin {x: 0, y: 0}.

Then you can linear/binary search your way to the solution as suggested by the other answers. It is more accurate than getComputedTextLength, however it does not work on Firefox; for some reason the browser will try to extrapolate the positions and return junk values.