From 48b961bf966b34047bf0e91612a6971740c43f3c Mon Sep 17 00:00:00 2001 From: luomy Date: Wed, 3 Nov 2021 16:17:03 +0800 Subject: [PATCH 1/3] fix(ios): update rich text layout --- ios/sdk/component/text/HippyShadowText.h | 1 + ios/sdk/component/text/HippyShadowText.mm | 28 +++++++++++++++++------ 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/ios/sdk/component/text/HippyShadowText.h b/ios/sdk/component/text/HippyShadowText.h index 97bb55d3cc0..5c39e71d677 100644 --- 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 index 21f50e5affb..0ebca9f5d10 100644 --- 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 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]; From c587ed2b5ed59b5e8e612bb10f838bb5d8fbe23a Mon Sep 17 00:00:00 2001 From: luomy Date: Thu, 4 Nov 2021 18:04:46 +0800 Subject: [PATCH 2/3] fix(ios): update rich text layout --- ios/sdk/component/text/HippyShadowText.mm | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/ios/sdk/component/text/HippyShadowText.mm b/ios/sdk/component/text/HippyShadowText.mm index 0ebca9f5d10..4f3bfc62209 100644 --- a/ios/sdk/component/text/HippyShadowText.mm +++ b/ios/sdk/component/text/HippyShadowText.mm @@ -263,11 +263,10 @@ - (void)applyLayoutToChildren:(__unused MTTNodeRef)node */ 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 lineHeight = usedOriginRect.size.height; CGFloat Roundedheight = x5RoundPixelValue(height); - CGFloat originY = usedOriginRect.origin.y + (maxLineHeight - Roundedheight) / 2; + CGFloat originY = usedOriginRect.origin.y + (lineHeight - Roundedheight) / 2; CGRect childFrame = { { x5RoundPixelValue(glyphRect.origin.x), x5RoundPixelValue(originY) }, { x5RoundPixelValue(width), Roundedheight } }; From a67d661955c6f9a9090f7db7722acb8f7936936a Mon Sep 17 00:00:00 2001 From: luomy Date: Mon, 29 Nov 2021 14:33:11 +0800 Subject: [PATCH 3/3] fix(ios): use fabs to compare float values --- ios/sdk/component/text/HippyShadowText.mm | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ios/sdk/component/text/HippyShadowText.mm b/ios/sdk/component/text/HippyShadowText.mm index 4f3bfc62209..90029c2eb6f 100644 --- a/ios/sdk/component/text/HippyShadowText.mm +++ b/ios/sdk/component/text/HippyShadowText.mm @@ -467,7 +467,7 @@ - (void)_setParagraphStyleOnAttributedString:(NSMutableAttributedString *)attrib fontLineHeight:(CGFloat)fontLineHeight heightOfTallestSubview:(CGFloat)heightOfTallestSubview { NSTextStorage *textStorage = [[NSTextStorage alloc] initWithAttributedString:attributedString]; - if (0 == _lineHeight) { + if (fabs(_lineHeight - 0) < DBL_EPSILON) { _lineHeight = fontLineHeight; } // check if we have lineHeight set on self