How to get this text layout algorithm to properly scale the text to “font size” option (text made with SVG paths)?

I have this Codepen demo in TypeScript/React showing the layout of Hebrew text according to the “stretched” text design, as described here. It looks like this in a few different font sizes:

32

It looks the best at this “scale” (you can edit the 16 on line #1092 at the bottom of the file, which says setSefer(render(words, 16))).

16

It breaks down at this scale, it’s not laid out correctly in several aspects.

enter image description here

Here is a demo showing the bounding box on one of the SVGs (SVG is generated per line in theory, but notice they don’t go on one line here).

enter image description here

Problem

The problem is to layout the text so the 4 main letters defined here grow to make it so the text is fully “justified” on the sides:

const scalePriority: Record<string, number> = {
  ד: 1,
  ה: 3,
  ר: 2,
  ת: 4,
}

The Codepen is 20% JSON data for the text, 30% glyph data in templated SVG paths, 40% logic for doing the layout of the text at the level of SVG React nodes, and 10% the React rendering.

The 40% logic I have been fiddling with all night, and wondering if you can spot where I am going wrong. I don’t think we need to care about the formatLine function, that is where the offset adjustments are made to grow the letters. There is some slight spacing issue on the letters themselves, I think that has to do with the SVG path code, so not relevant for this question. But that leads me to the main question.

Question

How do I get this to layout at different “font sizes” properly? (Font size is that 16 setting you can change). Why can’t I just say <svg width="100%" height={fontSize}> on each line of the SVG, and it would just take up the full parent width? That way if the screen was 800px, and font size 16, it would be long rows of small text, and at 48px, it would be 800px wide “narrow” rows (since the font is so much bigger), and many more lines. I can’t figure out why the SVG is not behaving like I’d expect.

P.S. I “ported” this text layout code to TypeScript from JS code I had from many years ago, and I’m not sure if I originally wrote it or someone else wrote it. I can’t seem to find anywhere on the web for a reference of it, so I’m not sure haha.