feat(text): expose trimmedHeight on text nodes#30
Merged
Conversation
Add a read-only `node.trimmedHeight` getter and include `trimmedHeight`
in the text `loaded` event payload. Represents the visible glyph
extent — cap-top of the first line to descender bottom of the last
line — useful for clients who want flex `alignItems: 'center'` (or any
layout that aligns by node `h`) to optically center the glyphs rather
than the full `lineHeightPx × N` line-box.
Typical usage:
text.once('loaded', (n, p) => { text.h = p.trimmedHeight; });
Formula (descender is negative in font metrics):
trimmedHeight = capHeight − descender + (lines − 1) × lineHeightPx
Computed once per layout in both the SDF and Canvas renderers, cached
in the SDF layout cache so cache hits don't recompute.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This was referenced May 22, 2026
chiefcll
added a commit
that referenced
this pull request
May 23, 2026
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
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
Adds a read-only
node.trimmedHeightgetter andtrimmedHeightto the textloadedevent payload. Represents the visible glyph extent — first line's cap-top to last line's descender bottom — independent oflineHeightPx's half-leading and ascender slack.The intended use case is flex layouts:
After this, a flex parent with
alignItems: 'center'will optically center the caps rather than the fulllineHeightPx × Nline-box. No more "the text looks a few pixels low" inside flex rows.API
CoreTextNode#trimmedHeight: number— read-only getter (inherited automatically byITextNode).NodeTextLoadedPayload.trimmedHeight: number— new field alongsidedimensions.TextRenderInfo.trimmedHeight: number— new field (also on the cachedTextLayout).Formula
For N lines (descender is negative in
NormalizedFontMetrics, so subtracting it adds the depth):capHeight − descender(cap-top to descender bottom).0.lineHeightPxbetween baselines — only the first cap-top and last descender are trimmed.Matches CSS
text-box-trim: trim-both; text-box-edge: cap text.Decisions
Asked the user and locked:
trimToContentprop, both).Files
NodeTextLoadedPayload.trimmedHeight.TextRenderInfo.trimmedHeight,TextLayout.trimmedHeight.generateTextLayout, cache; populate in all return paths.renderText._renderInfo, emit inloadedevent, expose getter.Test plan
pnpm buildclean.vitest run— 182/182 pass.🤖 Generated with Claude Code