Skip to content

Fix custom-font ellipsis clipping on Android - #59088

Closed
gotbora wants to merge 1 commit into
react:mainfrom
gotbora:export-D116515542
Closed

gotbora wants to merge 1 commit into
react:mainfrom
gotbora:export-D116515542

Conversation

@gotbora

@gotbora gotbora commented Oct 14, 2026

Copy link
Copy Markdown

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

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>
@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Oct 14, 2026
@meta-codesync

meta-codesync Bot commented Oct 14, 2026

Copy link
Copy Markdown

@gotbora has exported this pull request. If you are a Meta employee, you can view the originating Diff in D116515542.

@meta-codesync meta-codesync Bot closed this in ababa4d Oct 14, 2026
@meta-codesync meta-codesync Bot added the Merged This PR has been merged. label Oct 14, 2026
@meta-codesync

meta-codesync Bot commented Oct 14, 2026

Copy link
Copy Markdown

This pull request has been merged in ababa4d.

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

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. meta-exported p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant