Skip to content

Commit

Permalink
iOS: fix the baseline issue when displaying a mixture of different-la…
Browse files Browse the repository at this point in the history
…nguage characters (#19653)

Summary:
This fixes #19193

Characters of different languages may have different height and different baseline, even with a same font and same font-size. When they mixed together, iOS will adjust their baselines automatically, to display a suitable view of text.

The problem is the behavior of dealing with the text-style property 'lineHeight'.

It once to be a right way at version 0.52.3, to setting a base-line-offset attribute for the whole range of the string. However, in current version, it enumerated the string, and set a different  base-line-offset for different font-height characters.

And this behavior broke the baseline adjustment made by the iOS. It just make every character's baseline aligned to a same line. But it is not supposed to displaying characters of different languages like that. Chinese characters' baseline is the bottom of each, however, it is not for English characters.

So maybe it is the better way to give a same value of base-line-offset attribute for the whole string. And this PR just did that: found the biggest value of font-height in the text, and calculate the offset with that biggest value, then set to the whole string. This will keep the origin baseline adjustment for different languages' chars made by iOS.

Since I always got an error when running the snapshot test locally, I can't even pass the them with the unmodified code in master branch.

The error is "Nesting of \<View\> within \<Text\> is not currently supported."

After I comment all of the check of that error from the source code, I got a different snapshot from the reference ones. It seems that all components which will cause that error are not rendered in the reference images.

Since this PR changed the behavior of 'lineHeight' property, it's better to add a new snapshot case for the situation of different-language-characters' mixture. So maybe somebody could help me with that or maybe it should be a issue?

[IOS] [BUGFIX] [Text] - fix the baseline issue when displaying a mixture of different-language characters
Pull Request resolved: #19653

Differential Revision: D10140131

Pulled By: shergin

fbshipit-source-id: 646a9c4046d497b78a980d82a015168cf940646b
  • Loading branch information
BingBingL authored and facebook-github-bot committed Oct 2, 2018
1 parent d3f2f96 commit c1561ab
Showing 1 changed file with 12 additions and 10 deletions.
22 changes: 12 additions & 10 deletions Libraries/Text/Text/RCTTextShadowView.m
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ - (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText
return;
}

[attributedText beginEditing];
__block CGFloat maximumFontLineHeight = 0;

[attributedText enumerateAttribute:NSFontAttributeName
inRange:NSMakeRange(0, attributedText.length)
Expand All @@ -144,19 +144,21 @@ - (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText
return;
}

if (maximumLineHeight <= font.lineHeight) {
return;
if (maximumFontLineHeight <= font.lineHeight) {
maximumFontLineHeight = font.lineHeight;
}
}
];

CGFloat baseLineOffset = maximumLineHeight / 2.0 - font.lineHeight / 2.0;
if (maximumLineHeight < maximumFontLineHeight) {
return;
}

[attributedText addAttribute:NSBaselineOffsetAttributeName
value:@(baseLineOffset)
range:range];
}
];
CGFloat baseLineOffset = maximumLineHeight / 2.0 - maximumFontLineHeight / 2.0;

[attributedText endEditing];
[attributedText addAttribute:NSBaselineOffsetAttributeName
value:@(baseLineOffset)
range:NSMakeRange(0, attributedText.length)];
}

- (NSAttributedString *)attributedTextWithMeasuredAttachmentsThatFitSize:(CGSize)size
Expand Down

0 comments on commit c1561ab

Please sign in to comment.