Strange gap after text in right justified flexbox

[Vincent Taverna]

Bug report

Description / Observed Behavior

Apologies if this was already reported elsewhere, I looked around and could not find a similar reported issue.

When rendering a div with some text in it, or a span that includes a comma or period, I am finding that the text is not properly justified to the right. For example, if you have

<div style={{ display: 'flex', justifyContent: 'flex-end' }}>$67.00</div>

Demo

The text will not be rendered at the end of that div, but instead includes a gap.

Expected Behavior

I would expect the text to be rendered like it is when not using a period ., like this.

Reproduction

You can find the reproduction here.

Additional Context

Satori version: 0.11.2

I've tried a variety of fonts, html entities, and styles, but can't get the layout to function as expected.
If someone has dealt with this in the past, I'd love to know how they were able to work around this.

EDIT: I am not sure why this works, but I have found that wrapping the . character in its own span seems to correctly justify the text, perhaps the way it measures character widths becomes inaccurate when mixing varying width text nodes?

[Jeferson De Freitas Pinto]

This happened to me using textWrap: "balance", check this playground