vercel
Strange gap after text in right justified flexbox
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>
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?
