@remotion/web-renderer: Support more text Canvas properties#6871
@remotion/web-renderer: Support more text Canvas properties#6871JonnyBurger merged 3 commits intomainfrom
@remotion/web-renderer: Support more text Canvas properties#6871Conversation
…, text rendering, and word spacing Pass through additional Canvas text drawing style properties from computed CSS styles: fontVariantCaps, fontKerning, fontStretch, textRendering, and wordSpacing. This enables CSS font-feature-settings like small-caps to render correctly via the Canvas API's corresponding properties. Closes #6869 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Review: @remotion/web-renderer: Support fontFeatureSettings
The code changes look correct and well-implemented. A few issues need addressing before merging.
1. font-feature-settings case in fixture will not render correctly
The fixture includes a test case using fontFeatureSettings: '"smcp"' (packages/web-renderer/src/test/fixtures/text/font-variant-caps.tsx:23-29). However, the Canvas 2D API does not have a fontFeatureSettings context property. Unlike fontVariantCaps, fontKerning, fontStretch, and textRendering which have direct Canvas context equivalents, font-feature-settings cannot be passed through to the Canvas API this way.
This test case will silently fail to render as small caps. You have two options:
- Remove the
font-feature-settingscase from the fixture (since it's out of scope for this PR), or - Embed the font-feature-settings into the
ctx.fontstring using the CSS font shorthand syntax
2. Fixture is not registered in the test suite
The new fixture font-variant-caps is not imported in Root.tsx or text.test.tsx. The other text fixtures (letterSpacing, fontStyle, etc.) each have a corresponding visual regression test in text.test.tsx. Without a test, the fixture won't be validated by CI and could silently break.
3. PR description conflates font-variant-caps with font-feature-settings
The summary states "CSS font-feature-settings like \"smcp\" now render correctly via the Canvas API's fontVariantCaps property" — but font-feature-settings and font-variant-caps are distinct CSS properties. The Canvas 2D fontVariantCaps property handles font-variant-caps: small-caps, not font-feature-settings: "smcp". The PR correctly implements the former; the latter is not handled.
4. Minor: missing margin in fixture
The font-feature-settings paragraph in the fixture is missing marginBottom: 10, causing inconsistent vertical spacing compared to the other paragraphs.
| > | ||
| Font feature settings smcp: The quick brown fox jumps over the lazy | ||
| dog. | ||
| </p> |
There was a problem hiding this comment.
This font-feature-settings case will not render as small caps in the web renderer. The Canvas 2D API has no fontFeatureSettings context property (unlike fontVariantCaps/fontKerning/fontStretch/textRendering which do). Either remove this test case or implement support by encoding the font feature into the ctx.font string.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@remotion/web-renderer: Support fontFeatureSettings@remotion/web-renderer: Support more text Canvas properties
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Summary
fontVariantCaps,fontKerning,fontStretch,textRendering, andwordSpacingfont-feature-settingslike"smcp"(small caps) now render correctly via the Canvas API'sfontVariantCapspropertyCloses #6869
Test plan
fontVariantCaps: 'small-caps'renders correctly in web rendererfontFeatureSettings: '"smcp"'renders as small capsfontKerning,fontStretch,textRendering, andwordSpacingpass through correctly🤖 Generated with Claude Code