react-native
react-native copied to clipboard
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.