react-native
react-native copied to clipboard
facebook
Android text oversized glyph clipping
Summary:
Android TextView native implementation clips oversized font glyphs due to padding box clipping. This can be found in TextView sources: https://android.googlesource.com/platform/frameworks/base/+/jb-mr0-release/core/java/android/widget/TextView.java#4852 https://android.googlesource.com/platform/frameworks/base/+/jb-mr0-release/core/java/android/widget/TextView.java#4838
This causes dense fonts to be clipped. Example of such clipping in Android built-in 'notoserif' font, with 'italic' style and weight '900' (see top row):
Bottom row "E is not cut" is the one with fix applied.
This is just an example, on some dense and (very) bold fonts, the effect is much worse and noticable.
To follow an idea of expanding overflow styling support: https://github.com/facebook/react-native/pull/44734 I decided to bind this behavior with overflow: visible style. I'm not certain if this is desired though, in my own project, I've created a dedicated clipRect prop.
The solution idea is to make TextView draw on custom OverflowingCanvas, and then apply custom canvas bitmap to TextView's canvas. This should not be too memory heavy - the same bitmap is used in both canvases.
Changelog:
Test Plan:
| Platform | Engine | Arch | Size (bytes) | Diff |
|---|---|---|---|---|
| android | hermes | arm64-v8a | 21,300,594 | +65,866 |
| android | hermes | armeabi-v7a | n/a | -- |
| android | hermes | x86 | n/a | -- |
| android | hermes | x86_64 | n/a | -- |
| android | jsc | arm64-v8a | 24,497,615 | +65,693 |
| android | jsc | armeabi-v7a | n/a | -- |
| android | jsc | x86 | n/a | -- |
| android | jsc | x86_64 | n/a | -- |
Base commit: 0fd4a9447e432b8c537825f571409f56ae63dc90 Branch: main
This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.
This PR was closed because it has been stalled for 7 days with no activity.