fix(share): OG image renders CJK glyphs#377
Merged
Merged
Conversation
Titles with Chinese / Japanese / Korean characters rendered as black "NO GLYPH" placeholder boxes on the social-card PNG. workers-og ships only Inter by default; any codepoint outside Inter's Latin/Greek/Cyrillic coverage hit Satori's fallback. Fix: load Noto Sans SC alongside Inter via workers-og's loadGoogleFont and pass both into the ImageResponse fonts list. Satori walks the font chain per codepoint — Latin resolves to Inter, CJK falls through to Noto Sans SC. Font subsets are fetched per render with text=<glyphs we actually paint>, so each request grabs a few KB instead of the full ~3 MB CJK blob. Both loads degrade gracefully: a Google Fonts outage leaves the OG image rendering with whichever subset arrived (worst case: pre-fix behaviour, NO GLYPH boxes — never a 500). Test mocks for `workers-og` in og.test.ts + publish.test.ts now stub `loadGoogleFont` to a 1-byte ArrayBuffer. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Titles containing Chinese / Japanese / Korean characters rendered as black "NO GLYPH" placeholder boxes on the
/api/og/<id>.pngsocial-card preview.workers-og(the Satori wrapper used for OG rendering) bundles only Inter — any codepoint outside Inter's Latin / Greek / Cyrillic coverage hit Satori's fallback glyph.Fix
renderOgPngnow loads two font subsets in parallel vialoadGoogleFont:Both calls pass
text=<glyphs we actually paint>so Google Fonts returns only the codepoints in the current title plus the static "SPOOL · SHARE" wordmark and date string — typically a few KB per render instead of the full ~3 MB CJK blob.buildOgHtmldeclaresfont-family: Inter, 'Noto Sans SC', system-ui, sans-serif. Satori walks the chain per codepoint, so Latin chars resolve to Inter and the rest fall through to Noto Sans SC.Both font loads degrade gracefully: a Google Fonts outage leaves the OG image rendering with whichever subset arrived — worst case is the pre-fix behaviour with NO GLYPH boxes, never a 500.
Tests
workers-ogmocks inog.test.tsandpublish.test.tsnow stubloadGoogleFontto a 1-byteArrayBufferso the suites keep running without hitting the network.pnpm --filter @spool/share-backend test— 220 / 220Manual verification
Published a new share with a Chinese title via the desktop app; fetched
/api/og/<id>.pngfrom the running wrangler instance and confirmed the title renders as Chinese characters rather than the placeholder blocks.Submitter: @graydawnc
🤖 Generated with Claude Code