Skip to content

Text rendering improvements#107

Open
scorsin-oai wants to merge 21 commits into
Snapchat:mainfrom
scorsin-oai:simon/260621-text_rendering_improvements
Open

Text rendering improvements#107
scorsin-oai wants to merge 21 commits into
Snapchat:mainfrom
scorsin-oai:simon/260621-text_rendering_improvements

Conversation

@scorsin-oai

@scorsin-oai scorsin-oai commented Jun 22, 2026

Copy link
Copy Markdown
Contributor

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:

<label>
  </view>
</label>

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.

Screenshot 2026-06-21 at 8 16 27 PM

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.

Screenshot 2026-06-21 at 8 38 42 PM

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.

Screenshot 2026-06-21 at 8 38 49 PM

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

  • Bug fix (non-breaking change that fixes an issue)
  • Documentation improvement
  • Performance optimization
  • Test improvement
  • Other (please describe)

Testing

  • Tests pass locally (bazel test //...)
  • Added/updated tests for changes (if applicable)
  • Tested on multiple platforms (iOS/Android/Web/macOS as applicable)
  • Manual testing performed (describe below)

Testing Details

Checklist

  • Code follows project style guidelines
  • Documentation updated (if needed)
  • No breaking changes (or documented in description)
  • Commit messages follow conventional format
  • No secrets, API keys, or internal URLs included

Related Issues

Additional Context

@github-actions github-actions Bot added area/runtime Valdi runtime (C++/native) area/build-system Bazel build rules and config area/docs Documentation area/snap-drawing SnapDrawing library platform/ios iOS-specific platform/android Android-specific labels Jun 22, 2026
@github-actions

Copy link
Copy Markdown

Sensitive Files Detected

🔧 Build rules — Affects build rules for all Valdi consumers.

This is an automated notice. A maintainer will review after import.

@semgrep-code-snapchat

Copy link
Copy Markdown

Semgrep found 104 internal-sensitive-strings findings:

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.

Comment thread apps/text_rendering_showcase/BUILD.bazel
@clholgat

Copy link
Copy Markdown
Collaborator

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?

@github-actions

github-actions Bot commented Jun 23, 2026

Copy link
Copy Markdown

⚠️ Bazel & CI Test Results

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

'gridColumnStart',
'fontWeight',
'lineClamp',
'lineHeight',

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you put this back?

Comment thread .bazelrc

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These new flags are a bit too broad, can you make them more specific?

@github-actions github-actions Bot added the area/yoga Yoga layout engine label Jun 25, 2026
@clholgat

Copy link
Copy Markdown
Collaborator

Pulling this in for additional testing

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area/build-system Bazel build rules and config area/docs Documentation area/runtime Valdi runtime (C++/native) area/snap-drawing SnapDrawing library area/yoga Yoga layout engine platform/android Android-specific platform/ios iOS-specific

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants