expand text view frame and drawAttributedString frame when lineheight < fontsize.lineheight

Author: intergalacticspacehighway

packages/react-native/React/Fabric/Mounting/ComponentViews/Text/RCTParagraphComponentView.mm

@@ -32,6 +32,11 @@ @interface RCTParagraphTextView : UIView
 @property (nonatomic) ParagraphAttributes paragraphAttributes;
 @property (nonatomic) LayoutMetrics layoutMetrics;
 
+// How much glyphs extend beyond line height on each side (when lineHeight < font line height).
+- (CGFloat)glyphOverflow;
+// Recomputes glyphOverflow from the current attributed string. Call after state changes.
+- (void)updateGlyphOverflow;
+
 @end
 
 #if !TARGET_OS_TV
@@ -123,6 +128,7 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
 - (void)updateState:(const State::Shared &)state oldState:(const State::Shared &)oldState
 {
   _textView.state = std::static_pointer_cast<const ParagraphShadowNode::ConcreteState>(state);
+  [_textView updateGlyphOverflow];
   [_textView setNeedsDisplay];
   [self setNeedsLayout];
 }
@@ -142,14 +148,25 @@ - (void)prepareForRecycle
 {
   [super prepareForRecycle];
   _textView.state = nullptr;
+  [_textView updateGlyphOverflow];
   _accessibilityProvider = nil;
 }
 
 - (void)layoutSubviews
 {
   [super layoutSubviews];
 
-  _textView.frame = self.bounds;
+  CGFloat overflow = _textView.glyphOverflow;
+  if (overflow > 0) {
+    // When lineHeight < font line height, expand the frame so glyphs can be rendered to match web behaiour.
+    _textView.frame = CGRectMake(
+        self.bounds.origin.x,
+        self.bounds.origin.y - overflow,
+        self.bounds.size.width,
+        self.bounds.size.height + overflow * 2);
+  } else {
+    _textView.frame = self.bounds;
+  }
 }
 
 #pragma mark - Accessibility
@@ -382,6 +399,58 @@ - (void)disableContextMenu
 
 @implementation RCTParagraphTextView {
   CAShapeLayer *_highlightLayer;
+  CGFloat _glyphOverflow;
+}
+
+- (CGFloat)glyphOverflow
+{
+  return _glyphOverflow;
+}
+
+- (void)updateGlyphOverflow
+{
+  _glyphOverflow = 0;
+
+  if (!_state) {
+    return;
+  }
+
+  NSAttributedString *attributedText =
+      RCTNSAttributedStringFromAttributedString(_state->getData().attributedString);
+  if (!attributedText || attributedText.length == 0) {
+    return;
+  }
+
+  __block CGFloat maxLineHeight = 0;
+  __block CGFloat maxFontLineHeight = 0;
+
+  [attributedText enumerateAttribute:NSParagraphStyleAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(NSParagraphStyle *style, __unused NSRange range, __unused BOOL *stop) {
+                            if (style && style.maximumLineHeight > 0) {
+                              maxLineHeight = MAX(maxLineHeight, style.maximumLineHeight);
+                            }
+                          }];
+
+  if (maxLineHeight == 0) {
+    return;
+  }
+
+  [attributedText enumerateAttribute:NSFontAttributeName
+                             inRange:NSMakeRange(0, attributedText.length)
+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
+                          usingBlock:^(UIFont *font, __unused NSRange range, __unused BOOL *stop) {
+                            if (font) {
+                              maxFontLineHeight = MAX(maxFontLineHeight, font.lineHeight);
+                            }
+                          }];
+
+  if (maxLineHeight >= maxFontLineHeight) {
+    return;
+  }
+
+  _glyphOverflow = ceil((maxFontLineHeight - maxLineHeight) / 2.0);
 }
 
 - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
@@ -406,6 +475,13 @@ - (void)drawRect:(CGRect)rect
 
   CGRect frame = RCTCGRectFromRect(_layoutMetrics.getContentFrame());
 
+  if (_glyphOverflow > 0) {
+    // Offset origin to account for the expanded text view, and expand height
+    // so the NSTextContainer has room for full glyph rendering.
+    frame.origin.y += _glyphOverflow;
+    frame.size.height += _glyphOverflow * 2;
+  }
+
   [nativeTextLayoutManager drawAttributedString:stateData.attributedString
                             paragraphAttributes:_paragraphAttributes
                                           frame:frame

packages/rn-tester/js/LineHeightTest.js

@@ -0,0 +1,25 @@
+import { Text, View, StyleSheet, SafeAreaView } from 'react-native';
+
+export function LineHeightTest() {
+  return (
+    <SafeAreaView style={styles.container}>
+        <Text style={styles.paragraph}>
+          The view will not be aligned
+          {'\n'}No way this text is aligned with the view
+        </Text>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 36,
+  },
+  paragraph: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    lineHeight: 10,
+    overflow: 'visible',
+  },
+});

packages/rn-tester/js/RNTesterAppShared.js

@@ -41,6 +41,7 @@ import {
   useColorScheme,
   useWindowDimensions,
 } from 'react-native';
+import { LineHeightTest } from './LineHeightTest';
 
 // In Bridgeless mode, in dev, enable static view config validator
 if (global.RN$Bridgeless === true && __DEV__) {
@@ -274,6 +275,9 @@ const RNTesterApp = ({
   // Hide chrome if we don't have much screen space and are showing UI for tests
   const shouldHideChrome = isScreenTiny && hadDeepLink;
 
+  return (
+    <LineHeightTest />
+  )
   return (
     <RNTesterThemeContext.Provider value={theme}>
       {Platform.OS === 'android' ? (