react-native icon indicating copy to clipboard operation
react-native copied to clipboard

Android text oversized glyph clipping

Open DrRefactor opened this issue 7 months ago • 1 comments

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): image

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:

DrRefactor avatar Jul 10 '24 17:07 DrRefactor