fix: Improve text line height calculation to properly align text
Context
Differential Revision: D62295350
There is a recurring issue in React Native where text containing accented characters, non-latin scripts, and special glyphs experiences truncation when line height is set too small, even when the line height equals or exceeds the font size. This problem has a significant impact, particularly when rendering complex text in multiple languages or special character sets.
See: https://docs.google.com/document/d/1W-A80gKAyhVbz_WKktSwwJP5qm6h6ZBjFNcsVbknXhI/edit?usp=sharing for more context
Investigation
Previously, when font metrics (ascent, descent, top, bottom) exceeded the line height, the logic arbitrarily prioritized descent over ascent and bottom top. This led to vertical misalignment and text clipping at the top of the text.
Proposed Implementation:
- Descent Exceeds Line Height: Descent is capped to fit within the line height, setting ascent and top to 0, similar to the current behavior.
- Shrink ascent and descent equally: When the combined ascent and descent exceed the line height, the vertical deficit is split proportionally between them, ensuring even distribution of the space.
- Proportionally shrink top and bottom: If the top and bottom together exceed the line height, reductions are now applied proportionally based on the delta between top and ascent and bottom and descent.
Testing
The result is significantly better than the current implementation, although there is minimal truncation still at single line heights, particularly with special characters. Functionally, this implementation does better at preserving the vertical alignment of the text, but does not fix the issue of Android + RN truncating content that is out of bounds of the span.
This pull request was exported from Phabricator. Differential Revision: D62295350
This pull request was exported from Phabricator. Differential Revision: D62295350
This pull request was exported from Phabricator. Differential Revision: D62295350
This pull request was exported from Phabricator. Differential Revision: D62295350
This pull request was exported from Phabricator. Differential Revision: D62295350
This pull request was exported from Phabricator. Differential Revision: D62295350
This pull request has been merged in facebook/react-native@65d8f66b50471d2fb4ddd5e63e17fcc808623110.