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

fix: Improve text line height calculation to properly align text

Open mellyeliu opened this issue 1 year ago • 2 comments

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:

  1. Descent Exceeds Line Height: Descent is capped to fit within the line height, setting ascent and top to 0, similar to the current behavior.
  2. 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.
  3. 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.

image

mellyeliu avatar Sep 06 '24 12:09 mellyeliu

This pull request was exported from Phabricator. Differential Revision: D62295350

facebook-github-bot avatar Sep 06 '24 12:09 facebook-github-bot

This pull request was exported from Phabricator. Differential Revision: D62295350

facebook-github-bot avatar Sep 06 '24 12:09 facebook-github-bot

This pull request was exported from Phabricator. Differential Revision: D62295350

facebook-github-bot avatar Sep 10 '24 17:09 facebook-github-bot

This pull request was exported from Phabricator. Differential Revision: D62295350

facebook-github-bot avatar Sep 10 '24 18:09 facebook-github-bot

This pull request was exported from Phabricator. Differential Revision: D62295350

facebook-github-bot avatar Sep 11 '24 17:09 facebook-github-bot

This pull request was exported from Phabricator. Differential Revision: D62295350

facebook-github-bot avatar Sep 11 '24 18:09 facebook-github-bot

This pull request has been merged in facebook/react-native@65d8f66b50471d2fb4ddd5e63e17fcc808623110.

facebook-github-bot avatar Sep 11 '24 21:09 facebook-github-bot