[HOLD for payment 2022-11-11] [$1500] some emojis are not displayed correctly as they should be - reported by Karim mostafa

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1- open app 2- Type emoji's keyword in the chat box 3- observe the shape of the emoji appeared

Expected Result:

Emojis should appear in the normal shapes as they are supposed to

Actual Result:

Emojis appeared in different shape than they are supposed to

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.88-0 Reproducible in staging?: Y Reproducible in production?: Y Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/43995119/184213098-5b1b9d1d-efae-4df8-a304-634fa58f3a6d.mp4

Expensify/Expensify Issue URL: Issue reported by: @Karim-30 (Karim mostafa) Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1658404495570899

View all open jobs on GitHub

[melvin-bot[bot]]

Triggered auto assignment to @johncschuster (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[melvin-bot[bot]]

Triggered auto assignment to @aldo-expensify (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

Seems like this will be solved in https://github.com/Expensify/App/pull/9551. We are already tackling this in https://github.com/Expensify/App/issues/9123 since some time.

[aldo-expensify]

At least for them moment, https://github.com/Expensify/App/pull/9551 is not solving it:

This can be reproduced in Chrome / web (macos). I have no idea where these emojis come from, are they characters in the font we use?

Update: maybe from here: https://github.com/Expensify/App/blob/e3c8897a5f7f870cce04e62fc433acb68f371dbe/assets/emojis.js#L8779-L8784

[melvin-bot[bot]]

Triggered auto assignment to @bfitzexpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[bfitzexpensify]

@parasharrajat #9123 is referencing a particular subset of emoji problems (skin tone), but if I'm understanding correctly, you're saying that it will address this problem too?

[aldo-expensify]

I got the feeling that it was something different. This happens even in chrome and I think it is coming from the hardcoded list of emojis in this file: https://github.com/Expensify/App/blob/e3c8897a5f7f870cce04e62fc433acb68f371dbe/assets/emojis.js#L8779-L8784

I tested manually changing the symbol, and I saw it changing in the app.

[thesahindia]

https://github.com/Expensify/App/issues/9123 has two issues in it.

1. Hand emoji at skin tone picker shows as black and white (safari only)
2. Some emojis look different at windows/Ubuntu because they need some system specific font.

This one is same as 2 but the system is different so we will need another font for this (Apple Color Emoji)

[bfitzexpensify]

Great, thanks for the explanation!

Upwork job here Reporting job here - please apply to this @Karim-30

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mananjadhav (Exported)

[melvin-bot[bot]]

Triggered auto assignment to @tgolen (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Karim-30]

Proposal

By replacing the incorrect emojis inside App/assets/emojis.js with the correct emojis (see the attached emojis.txt), all Emojis will appear in the correct shapes in Safari, Firefox.

but in Chrome all Emojis will appear in the correct shapes except these 8 arrow emojis.

to solve these 8 emojis we will need to change the fontFamily for some components from GTAmericaExp-Regular to sans-serif or roboto as the following :

in src/styles/fontFamily/index.js:

    MONOSPACE_BOLD: 'GTAmericaExpMono-Bd',
    MONOSPACE_BOLD_ITALIC: 'GTAmericaExpMono-BdIt',
+   SANS_SERIF: 'sans-serif',

in src/styles/styles.js :

    baseTextInput: {
-       fontFamily: fontFamily.GTA,
+       fontFamily: fontFamily.SANS_SERIF,
        fontSize: variables.fontSizeNormal,
        lineHeight: variables.fontSizeNormalHeight,
        color: themeColors.text,


    textLabelSupporting: {
-       fontFamily: fontFamily.GTA,
+       fontFamily: fontFamily.SANS_SERIF,
        fontSize: variables.fontSizeLabel,



   textInputCompose: addOutlineWidth({
        backgroundColor: themeColors.componentBG,
        borderColor: themeColors.border,
        color: themeColors.text,
-       fontFamily: fontFamily.GTA,
+       fontFamily: fontFamily.SANS_SERIF,
        fontSize: variables.fontSizeNormal,
        borderWidth: 0,


    emojiText: {
-       fontFamily: fontFamily.GTA_BOLD,
+       fontFamily: fontFamily.SANS_SERIF,
        textAlign: 'center',

in src/pages/home/report/ReportActionItemFragment.js :

 import canUseTouchScreen from '../../../libs/canUseTouchscreen';
 import compose from '../../../libs/compose';
+import fontFamily from '../../../styles/fontFamily';


                    <Text
                        selectable={!canUseTouchScreen() || !props.isSmallScreenWidth}
-                       style={EmojiUtils.containsOnlyEmojis(props.fragment.text) ? styles.onlyEmojisText : undefined}
+                       style={[{fontFamily: fontFamily.SANS_SERIF}, EmojiUtils.containsOnlyEmojis(props.fragment.text) ? styles.onlyEmojisText : undefined]}
                    >

Result :

https://user-images.githubusercontent.com/108357004/184735747-cadeb0b8-5ad2-4cd7-8834-a9e2acd03e88.mov

Don't forget to replace App/assets/emojis.js content with the attached file content. emojis.txt

[mananjadhav]

@Karim-30 I don't think changing the font family is a viable solution here.

[bfitzexpensify]

Doubled to $500

[Puneet-here]

Is there a reason for not adding Apple Color Emoji as mentioned here https://github.com/Expensify/App/issues/10356#issuecomment-1213429783.

[mdneyazahmad]

Another option is to use an sprite of emojis. It will be used as background of span element and adjust background position for specific emoji. We can break the emoji into multiple sprite sheet. This will guarantee consistency between browsers and platforms. But, it will require more work to be done.

[tgolen]

I vote we stay away from a sprite-based approach. I think it results in more maintenance than is worth it.

On Tue, Aug 23, 2022 at 10:33 AM mdneyazahmad @.***> wrote:

Another option is to use an sprite of emojis. It will be used as background of span element and adjust background position for specific emoji. We can break the emoji into multiple sprite sheet. This will guarantee consistency between browsers and platforms. But, it will require more work to be done.

— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/10356#issuecomment-1223740473, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJMAB2HJMFIB2WAPDJC5GTV2SEGRANCNFSM56JESWWQ . You are receiving this because you were mentioned.Message ID: @.***>

[mananjadhav]

Agreed with no sprite approach.

[bfitzexpensify]

Doubled to $1000

[Puneet-here]

Proposal

Apple Color Emoji can fix this for mac but this issue is at other platforms too (android app and mWeb) So instead of adding another font we have to replace these broken emojis with the right ones. In this issue only few emojis are listed but there are more emojis which aren't rendering as we want, I can find them and replace them.

To test this try going to https://emojipedia.org/ and search for coffin copy the coffin then paste it here at the code https://github.com/Expensify/App/blob/1e5772c92add74ec6d62535d032a71fcb30b8634/assets/emojis.js#L8262

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[bfitzexpensify]

@mananjadhav proposal above for you to review

[mananjadhav]

Thanks for the bump @bfitzexpensify.

@Puneet-here While your proposed solution might work to replace the emojis with the relevant symbols, it lacks details on:

1. Which source are you going to rely on? I am not very confident with emojipedia.org emojis (this feedback is from my experience of atleast 1-1.5 years back)
2. How will you identify the problematic emojis?
3. Is there a way to test his reliably?

[Puneet-here]

@Puneet-here While your proposed solution might work to replace the emojis with the relevant symbols, it lacks details on:

1. Which source are you going to rely on? I am not very confident with emojipedia.org emojis (this feedback is from my experience of atleast 1-1.5 years back)

I tried it and haven't seen any problem for the emojis I tried to fix so far, we can use it as I will be checking every emoji so in case some emoji doesn't work I can get that emoji from some other place. We can get the emojis from other sources like:- https://github.com/github/gemoji/blob/master/db/emoji.json

2. How will you identify the problematic emojis?

I will check every individual emoji at different platforms.

3. Is there a way to test this reliably?

I can create the list of problematic emojis and share it so that we can just replace all the emojis at emojis.js with them to test it.

[mananjadhav]

How will you identify the problematic emojis?

I will check every individual emoji at different platforms.

@Puneet-here Considering the number of emojis to be checked? Can we either list down the problematic emojis or have a programmatic way to identify the problematic emojis?

[Puneet-here]

Considering the number of emojis to be checked? Can we either list down the problematic emojis or have a programmatic way to identify the problematic emojis?

I don't think there's a programmatic way, I will list them down manually.

[bfitzexpensify]

@mananjadhav do you think the manual approach is fine or should we try to find another solution?

[mananjadhav]

@bfitzexpensify I started an internal thread here. I've tagged you.

[melvin-bot[bot]]

@tgolen, @mananjadhav, @bfitzexpensify Eep! 4 days overdue now. Issues have feelings too...

[tgolen]

Trying to wrap up the thread in Slack today so we can keep moving here.