feat(text): optical-center baseline mode, default for mixed-case UI#31
Merged
Conversation
Pure cap-height centering reads slightly low for lowercase-heavy
mixed-case strings like "Button" because the visual mass sits in the
x-height band, below cap-center. Pure x-height centering goes the
other way — caps appear high.
Add a new `textBaselineMode: 'optical'` that places the mean of
cap-height and x-height at the line-box center:
firstBaselineY = (lineHeightPx + (capHeight + xHeight) * 0.5) * 0.5
This is the sweet spot for typical TV UI text — same heuristic
macOS/iOS controls use. For Ubuntu at fontSize 32, text shifts up by
about 1.7 px vs. cap-mode; at fontSize 50, about 2.75 px.
Set `'optical'` as the new default. `'cap'` remains available for
content that's mostly uppercase or numeric (timers, badges), and `'x'`
for body text where lowercase dominates.
All 142 text-bearing VRT snapshots recertified to reflect the new
default. SDF handler comment updated since xHeight is now also
consumed by `'optical'`.
Co-Authored-By: Claude Opus 4.7 (1M context) <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
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
Pure cap-height centering (PR #27's default) reads slightly low for lowercase-heavy mixed-case strings like "Button" — the visual mass sits in the x-height band, below cap-center. Pure x-height centering goes the other way: capitals appear high.
This PR adds a new
textBaselineMode: 'optical'that places the mean of cap-height and x-height at the line-box center:This is the sweet spot for typical TV UI text — the same heuristic macOS/iOS controls use.
'optical'becomes the new default.'cap','x', and'linebox'remain available for content where one of those is specifically preferred.Why
For Ubuntu at common UI sizes, optical-mode shifts text up vs. cap-mode by:
That's the "text reads a little low" nudge designers manually apply in CSS — now built into the engine.
When to override
textBaselineMode: 'cap'globally. Optical mode pushes caps slightly above center for these.'x'if you want maximum lowercase centering.'linebox'matches the pre-PR-feat(text): cap-height centering as the per-line vertical anchor #27 behavior.Files
TextBaselineModetype and docstring.'optical'branch and updated the long anchor comment; switched module-level default.RendererMainSettings.textBaselineModedocstring and?? 'optical'fallback.'optical', not just'x'.visual-regression/certified-snapshots/chromium-ci/recertified to reflect the new default.Test plan
pnpm buildclean.vitest run— 182/182 pass.fontSize: 50.Notes for reviewers
textBaselineMode: 'cap'in renderer settings.🤖 Generated with Claude Code