[feat] intelligent word-wrap for title + subtitle text

[nberlette]

Currently there is no word-wrap functionality baked into the SVG rendering step, which is just shameful ☹️. This issue is mostly a place for me to store some thoughts, notes, and log my results throughout the process of implementing a "smart" wrapper function for migo.

Can we get away with using SVGTextElement.getComputedTextLength()? Does it produce accurate and dependable results...? On that note, what about SVGTextElement.getBoundingClientRect? Or SVGTextElement.getBBox? It sure would save me a lot of time to just be able to use a built-in interface for 90% of the logic in this scenario.

If not, heres a basic outline of the steps involved:

1. calculate glyph width from font size + weight

• (like @nicktaras/getFontCharWidth, or digging into the SVG font interfaces)

2. estimate required width for a given string in the desired font/size/weight

• (e.g. textLength * (glyphWidthFromStep1 + letterSpacing))

3. subtract a small percentage of the window width to determine a "safe-zone"; ensuring
   any breakable-words will be wrapped before it reaches the edge of the canvas or screen.

• e.g. width - (width * 0.05) ~> 950px / 1000px total (25px margin)

4. diff the required text width with the image safe-zone width.

let d = Math.ceil(requiredWidthFromStep2 - safeWidthFromStep3);
if (d > 0) {
  wrapLine();
  // if a line is reeeeeally long and requires 2+ screen breaks to fit
  // this re-wrap the text until all lines fit within the canvas.
  repeatStartingFromStep2ForEveryLine();
}

5. if all lines don't fit within the canvas size, attempt to scale the font size
   down until they do. Truncating the text should only be used as THE last resort.