Text rendering improvements#107
Conversation
Sensitive Files Detected🔧 Build rules — Affects build rules for all Valdi consumers. This is an automated notice. A maintainer will review after import. |
|
Semgrep found 104
This literal might contain a Snapchat internal reference that should not be committed to open-source repositories. Fix: Please replace / remove the string to avoid committing it to open-source repositories. |
|
It looks like the semantics of lineHeight on changed from a ratio/multiplier to explicit points, with the old behavior moving to a new lineHeightMultiple prop. This would be a silent behavioral break for existing consumers — any module using something like would go from 1.5x font-height spacing to a 1.5pt line height, effectively collapsing the text. Can we preserve the existing lineHeight semantics so this doesn't silently break existing modules? |
|
| Test Suite | Result |
|---|---|
| API Surface Check | ❌ failure |
| Snapshot Tests | ✅ success |
| Linux: Build & Export | ❌ failure |
| Linux: C++ Tests | ❌ failure |
| Valdi Smoke Tests | ✅ success |
Some tests failed. Please check the workflow logs for details.
🚀 Bazel remote cache is now enabled - future builds will be faster!
Workflow: Valdi CI
…lic:scorsin-oai/Valdi into simon/260621-text_rendering_improvements
| 'gridColumnStart', | ||
| 'fontWeight', | ||
| 'lineClamp', | ||
| 'lineHeight', |
There was a problem hiding this comment.
These new flags are a bit too broad, can you make them more specific?
|
Pulling this in for additional testing |
Description
This change brings significant improvements over the text rendering capabilities of Valdi. This is a composite PR of several PRs we have made in our own fork over the past couple of months.
Inline text children
Labels and textviews can now receive inline children, e.g:
The inline children are referred by their index in the attributed text that gets created and passed to the label. This enables to render arbitrary children in a label/textview and have them placed on the text layout itself. This is a very powerful feature making text rendering much more versatile.
Custom underline styles
Adds cross-platform custom underline style support, including dashed/dotted rendering, baseline alignment, styled text width fixes, clipping fixes, and platform-specific test coverage.
Core text styling and layout
Adds italic/system font handling, semibold iOS font support, attributed text background color/padding/radius, dashed/dotted underline values, explicit lineHeight and lineHeightMultiple support, TextField sizing/alignment fixes, Android attributed text fixes, and inline image buffer safety.
Text animations
Text and inline views can be animated by being passed an animation transform in the AttributedText. The TS side has a lot of control on how the animation can be setup, it can animate character by character, word by word, the whole thing at once etc... Inline views are also animated the same way.
text_animation.mov
character_reveal.mov
The change also introduces a new element type called
<textanimationgroup>. When rendered, it drives the text animations across all the subtree. This is used to allow many animations to run in sequence across a set of textviews/labels:text_animation_group.mov
SnapDrawing TextView/TextField support
Adds SnapDrawing text layers and fallback view-manager support so text can render correctly in drawing-backed contexts. This is mostly to make it possible to render a in a CLI application outside of iOS and Android, even if that textview is not interactive. We use this for running screenshots in CI.
Text selection
Adds support for text selection on a basic label instance. Labels are 2 orders of magnitude faster to create than textviews on iOS, this makes it possible to use text selection without opting in using a slow textview (it matters for views that render many of them).
Adds selectable TextView/label behavior across supported platforms, including Android selectable TextView support and iOS label/TextView selection menu support.
Additional changes
There were a few fixes required to make the build or the tests to pass.
Type of Change
Testing
bazel test //...)Testing Details
Checklist
Related Issues
Additional Context