fix(ios): update rich text layout

Tencent · Nov 3, 2021 · 48b961b · 48b961b
1 parent fd91412
commit 48b961b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/ios/sdk/component/text/HippyShadowText.h b/ios/sdk/component/text/HippyShadowText.h
@@ -41,6 +41,7 @@ extern NSString *const HippyShadowViewAttributeName;
     NSAttributedString *_cachedAttributedString;
     CGFloat _effectiveLetterSpacing;
     BOOL _textAlignSet;
+    CGFloat _maximumFontLineHeight;
 }
 
 @property (nonatomic, strong) UIColor *color;

diff --git a/ios/sdk/component/text/HippyShadowText.mm b/ios/sdk/component/text/HippyShadowText.mm
@@ -257,12 +257,20 @@ - (void)applyLayoutToChildren:(__unused MTTNodeRef)node
                 if (isnan(width) || isnan(height)) {
                     HippyLogError(@"Views nested within a <Text> must have a width and height");
                 }
-                UIFont *font = [textStorage attribute:NSFontAttributeName atIndex:range.location effectiveRange:nil];
+
+                /**
+                 * For RichText, a view, which is top aligment by default, should be center alignment to text,
+                 */
+
                 CGRect glyphRect = [layoutManager boundingRectForGlyphRange:range inTextContainer:textContainer];
+                NSParagraphStyle *style = [textStorage attribute:NSParagraphStyleAttributeName atIndex:0 effectiveRange:nil];
+                CGFloat maxLineHeight = style ? style.maximumLineHeight : _maximumFontLineHeight;
+                CGRect usedOriginRect = [layoutManager lineFragmentRectForGlyphAtIndex:range.location effectiveRange:nil];
+                CGFloat Roundedheight = x5RoundPixelValue(height);
+                CGFloat originY = usedOriginRect.origin.y + (maxLineHeight - Roundedheight) / 2;
                 CGRect childFrame = { { x5RoundPixelValue(glyphRect.origin.x),
-                                          x5RoundPixelValue(glyphRect.origin.y + glyphRect.size.height - height + font.descender) },
-                    { x5RoundPixelValue(width), x5RoundPixelValue(height) } };
-
+                                        x5RoundPixelValue(originY) },
+                    { x5RoundPixelValue(width), Roundedheight } };
                 NSRange truncatedGlyphRange = [layoutManager truncatedGlyphRangeInLineFragmentForGlyphAtIndex:range.location];
                 BOOL childIsTruncated = NSIntersectionRange(range, truncatedGlyphRange).length != 0;
 
@@ -460,7 +468,9 @@ - (void)_setParagraphStyleOnAttributedString:(NSMutableAttributedString *)attrib
                               fontLineHeight:(CGFloat)fontLineHeight
                       heightOfTallestSubview:(CGFloat)heightOfTallestSubview {
     NSTextStorage *textStorage = [[NSTextStorage alloc] initWithAttributedString:attributedString];
-
+    if (0 == _lineHeight) {
+        _lineHeight = fontLineHeight;
+    }
     // check if we have lineHeight set on self
     __block BOOL hasParagraphStyle = NO;
     if (_lineHeight || _textAlignSet) {
@@ -515,12 +525,16 @@ - (void)_setParagraphStyleOnAttributedString:(NSMutableAttributedString *)attrib
         paragraphStyle.maximumLineHeight = maxHeight;
         [attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:(NSRange) { 0, attributedString.length }];
 
+        /**
+         * for keeping text ertical center, we need to set baseline offset
+         */
         if (lineHeight > fontLineHeight) {
-            [attributedString addAttribute:NSBaselineOffsetAttributeName value:@(newLineHeight / 2 - maximumFontLineHeight / 2)
+            CGFloat baselineOffset = newLineHeight / 2 - maximumFontLineHeight / 2;
+            [attributedString addAttribute:NSBaselineOffsetAttributeName value:@(baselineOffset)
                                      range:(NSRange) { 0, attributedString.length }];
         }
     }
-
+    _maximumFontLineHeight = maximumFontLineHeight;
     // Text decoration
     if (_textDecorationLine == HippyTextDecorationLineTypeUnderline || _textDecorationLine == HippyTextDecorationLineTypeUnderlineStrikethrough) {
         [self _addAttribute:NSUnderlineStyleAttributeName withValue:@(_textDecorationStyle) toAttributedString:attributedString];