Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix text baseline being moved up on iOS #44932

Closed

Conversation

j-piasecki
Copy link
Contributor

Summary:

Fixes #44929

Moves calling RCTApplyBaselineOffset so it's called in similar way as on the old architecture:

[self postprocessAttributedText:textStorage];

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

I'm not exactly sure why (and Apple's docs aren't helping) but it looks like calling NSTextStorage initWithAttributedString results in an attributed string where emojis are separate fragments with Apple's emoji font set, which results in the correct baseline calculations. This is the way it happens on the old arch.

The way it's currently implemented on the new architecture, RCTApplyBaselineOffset is called on ` newly created attributed string where emojis are in the same fragment as other parts of the text which alters the result of baseline calculations compared to what's later drawn on the screen.

Changelog:

[IOS] [FIXED] - Fixed text baseline being moved upwards in certain cases

Test Plan:

Check the following snipped
import React from 'react';
import {
  Text,
  View,
} from 'react-native';

const App = () => {
  return (
    <View style={{
      paddingTop: 100,
    }}>
        <Text style={{fontSize: 15, lineHeight: 20, fontFamily: 'Arial', backgroundColor: 'gray'}}>A 😞😞😞 B</Text>
    </View>
  );
};


export default App;
Before After
new-broken new-fixed

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Software Mansion Partner: Software Mansion Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team. labels Jun 13, 2024
@analysis-bot
Copy link

Platform Engine Arch Size (bytes) Diff
android hermes arm64-v8a 20,364,441 -1
android hermes armeabi-v7a n/a --
android hermes x86 n/a --
android hermes x86_64 n/a --
android jsc arm64-v8a 23,569,574 -7
android jsc armeabi-v7a n/a --
android jsc x86 n/a --
android jsc x86_64 n/a --

Base commit: 3cb03cb
Branch: main

@facebook-github-bot
Copy link
Contributor

@sammy-SC has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@facebook-github-bot facebook-github-bot added the Merged This PR has been merged. label Jun 18, 2024
@facebook-github-bot
Copy link
Contributor

@sammy-SC merged this pull request in 01f7ab8.

Copy link

This pull request was successfully merged by @j-piasecki in 01f7ab8.

When will my fix make it into a release? | How to file a pick request?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Merged This PR has been merged. p: Software Mansion Partner: Software Mansion Partner Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Emojis are clipped when using certain combinations of fontFamily, fontSize and lineHeight
3 participants