fix: Consistent text positioning when embedFont is false (#723)

## Problem

When using `embedFont: false`, consecutive `<text>` elements have
inconsistent `x` positions, causing uneven spacing between words. This
is especially noticeable in multi-line text where gaps can accumulate to
over 1px.

| Content | x | width | Expected x | Gap |
|---------|---|-------|------------|-----|
| `" "` (space) | 96.29 | 3.96 | - | - |
| `"behavior"` | 100.56 | 61.02 | 100.25 | +0.31px |

## Root Cause

Two issues in `src/text/index.ts`:

1. **Line 570**: `leftOffset = Math.round(leftOffset)` rounds x
positions to integers while widths remain fractional
2. **Line 344**: `measureGrapheme()` on multi-character strings uses
`getAdvanceWidth()` (includes kerning), but `currentWidth` accumulates
using `measureText()` (sum of individual graphemes)

## Changes

1. Only round `leftOffset` when `embedFont: true` (paths benefit from
pixel alignment)
2. Use `measureText()` for multi-character strings when `embedFont:
false` to match position accumulation

## Test

Added `test/embed-font.test.tsx` that verifies consecutive text elements
have consistent x positions (gap < 0.01px).

Author: privatenumber

src/text/index.ts

@@ -341,6 +341,12 @@ export default async function* buildTextNodes(
           if (isImage(_text)) {
             _width = fontSize
             _isImage = true
+          } else if (!embedFont && _text.length > 1) {
+            // When embedFont is false, use measureText for multi-character strings
+            // to ensure consistency with how currentWidth is accumulated (sum of
+            // grapheme widths). measureGrapheme uses getAdvanceWidth which includes
+            // kerning, causing position mismatches between consecutive <text> elements.
+            _width = measureText(_text)
           } else {
             _width = measureGrapheme(_text)
           }
@@ -585,7 +591,12 @@ export default async function* buildTextNodes(
         }
       }
 
-      leftOffset = Math.round(leftOffset)
+      // Only round for embedded fonts (paths benefit from pixel alignment).
+      // For non-embedded fonts (<text> elements), keep fractional positions
+      // to maintain consistent spacing between consecutive elements.
+      if (embedFont) {
+        leftOffset = Math.round(leftOffset)
+      }
     }
 
     const baselineOfLine = baselines[line]

test/__image_snapshots__/font-test-tsx-test-font-test-tsx-font-should-handle-escape-html-when-embed-font-is-false-1-snap.png

@@ -0,0 +1,72 @@
+import { it, describe, expect } from 'vitest'
+
+import { initFonts } from './utils.js'
+import satori from '../src/index.js'
+
+describe('embedFont: false', () => {
+  let fonts
+  initFonts((f) => (fonts = f))
+
+  it('should have consistent x positions for multi-line text', async () => {
+    // This test verifies that when embedFont is false, consecutive text elements
+    // have consistent x positions (x[n] should equal x[n-1] + width[n-1]).
+    //
+    // Regression test for: src/text/index.ts rounding leftOffset to integers
+    // and using inconsistent width measurements (measureGrapheme vs measureText).
+    const svg = await satori(
+      <div
+        style={{
+          display: 'flex',
+          fontFamily: 'Roboto',
+          fontSize: 16,
+          width: 200,
+        }}
+      >
+        Hello world this is a test of text wrapping behavior
+      </div>,
+      {
+        width: 200,
+        height: 100,
+        fonts,
+        embedFont: false,
+      }
+    )
+
+    // Parse all <text> elements from the SVG
+    const textElementRegex =
+      /<text[^>]*\bx="([^"]+)"[^>]*\bwidth="([^"]+)"[^>]*>([^<]*)<\/text>/g
+    const textElements: { x: number; width: number; content: string }[] = []
+
+    let match
+    while ((match = textElementRegex.exec(svg)) !== null) {
+      textElements.push({
+        x: parseFloat(match[1]),
+        width: parseFloat(match[2]),
+        content: match[3],
+      })
+    }
+
+    expect(textElements.length).toBeGreaterThan(1)
+
+    // Check consecutive elements on the same line
+    // The x position of each element should equal the previous element's x + width
+    let maxGap = 0
+
+    for (let i = 1; i < textElements.length; i += 1) {
+      const prev = textElements[i - 1]
+      const curr = textElements[i]
+
+      const expectedX = prev.x + prev.width
+      const gap = Math.abs(curr.x - expectedX)
+
+      // Only check elements that appear to be on the same line (small gap)
+      // Large gaps indicate line breaks
+      if (gap < 50) {
+        maxGap = Math.max(maxGap, gap)
+      }
+    }
+
+    // The gap between consecutive elements should be negligible (< 0.01px)
+    expect(maxGap).toBeLessThan(0.01)
+  })
+})