Skip to content

fix: Consistent text positioning when embedFont is false#723

Merged
shuding merged 1 commit intovercel:mainfrom
privatenumber:fix/embed-font-text-positioning
Mar 3, 2026
Merged

fix: Consistent text positioning when embedFont is false#723
shuding merged 1 commit intovercel:mainfrom
privatenumber:fix/embed-font-text-positioning

Conversation

@privatenumber
Copy link
Copy Markdown
Contributor

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).

@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Jan 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
satori-playground Ready Ready Preview, Comment Jan 25, 2026 5:41pm

@shuding shuding changed the title fix: consistent text positioning when embedFont is false fix: Consistent text positioning when embedFont is false Mar 3, 2026
@shuding shuding merged commit dc07b70 into vercel:main Mar 3, 2026
6 checks passed
@github-actions
Copy link
Copy Markdown

github-actions bot commented Mar 3, 2026

🎉 This PR is included in version 0.24.1 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants