Repository navigation
Conversation
Summary: This fixes two Android `Text` bugs. ## Problem 1: tail ellipsis clipped with custom fonts Android generates the tail ellipsis outside styled text spans, shaping it with `ReactTextView`'s own paint. That paint did not carry the base text attributes React Native measured with — typeface, font size, letter spacing, font feature settings, or shaping flags. For custom fonts the ellipsis glyph can be wider than the reserved space, overflowing the text bounds and losing its last dot under `overflow: hidden`. ## Problem 2: `fontVariant` ignored without `fontFamily` `fontVariant` (`small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`, …) is applied through `CustomStyleSpan`, but `TextLayoutManager` only added that span when `fontFamily`, `fontWeight`, `fontStyle` or `fontVariationSettings` was also set. A `Text` (or nested fragment) that set only `fontVariant` rendered without the requested OpenType features. ## Fix - Add a `CustomStyleSpan` whenever `fontFeatureSettings` is set, in both span-building paths, so `fontVariant` works on its own. This changes the RNTester `fontVariants` example on Android. - Apply the resolved base `TextAttributeProps` to the view's paint before setting text, using the same `TextLayoutManager.updateTextPaint` that already builds the measurement paint. `updateTextPaint` now also applies letter spacing, font feature settings and shaping flags. A shared `resetTextPaint` clears the state when a view is recycled. - `PreparedLayout` now carries its `baseTextAttributes`, so selectable text (which still renders through `ReactTextView` with prepared layouts enabled) gets the correct paint. Changelog: [Android][Fixed] - Fix tail ellipsis overflowing or clipping on `Text` with a custom font [Android][Fixed] - Fix `fontVariant` being ignored on `Text` that doesn't also set `fontFamily`, `fontWeight` or `fontStyle` Reviewed By: Abbondanzo Differential Revision: D116515542 Signed-off-by: Bora Shim <borashim@meta.com>
|
@gotbora has exported this pull request. If you are a Meta employee, you can view the originating Diff in D116515542. |
|
This pull request has been merged in ababa4d. |
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:
This fixes two Android
Textbugs.Problem 1: tail ellipsis clipped with custom fonts
Android generates the tail ellipsis outside styled text spans, shaping it with
ReactTextView's own paint. That paint did not carry the base text attributes React Native measured with — typeface, font size, letter spacing, font feature settings, or shaping flags. For custom fonts the ellipsis glyph can be wider than the reserved space, overflowing the text bounds and losing its last dot underoverflow: hidden.Problem 2:
fontVariantignored withoutfontFamilyfontVariant(small-caps,oldstyle-nums,lining-nums,tabular-nums,proportional-nums, …) is applied throughCustomStyleSpan, butTextLayoutManageronly added that span whenfontFamily,fontWeight,fontStyleorfontVariationSettingswas also set. AText(or nested fragment) that set onlyfontVariantrendered without the requested OpenType features.Fix
CustomStyleSpanwheneverfontFeatureSettingsis set, in both span-building paths, sofontVariantworks on its own. This changes the RNTesterfontVariantsexample on Android.TextAttributePropsto the view's paint before setting text, using the sameTextLayoutManager.updateTextPaintthat already builds the measurement paint.updateTextPaintnow also applies letter spacing, font feature settings and shaping flags. A sharedresetTextPaintclears the state when a view is recycled.PreparedLayoutnow carries itsbaseTextAttributes, so selectable text (which still renders throughReactTextViewwith prepared layouts enabled) gets the correct paint.Changelog:
[Android][Fixed] - Fix tail ellipsis overflowing or clipping on
Textwith a custom font[Android][Fixed] - Fix
fontVariantbeing ignored onTextthat doesn't also setfontFamily,fontWeightorfontStyleReviewed By: Abbondanzo
Differential Revision: D116515542