Make inline emojis bigger

[rkfg]

Fixes element-hq/element-web#2890
Previous attempt is outdated because emojis don't use images now and thus can't be easily styled.

The regular inline emojis are too small by default and it's hard to recognize them. The only way to make them look good is to post only emojis as a single message, then they become much bigger. This pull request makes regular emojis much more readable like in other mainstream messengers.
Before:

After:

Signed-off-by: Sergey Shpikin [email protected]

Preview: https://618158226af8110aa94c88f8--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[rkfg]

Zero width joiner in emojis is handled incorrectly for now. Skin tones are handled correctly but gender modifiers aren't.

[rkfg]

Fixed now.

[jryans]

@matrix-org/design Are the updated emojis as in the screenshots above okay?

[turt2live]

Code seems fine. I would be a bit worried about scroll jumps, but that might be something to watch for after landing.

[nadonomy]

@rkfg apologies this slipped through the cracks in PR review.

@jryans I can't seem to load the netlify deployment preview, is to review, is it possible to rebuild?

[t3chguy]

@nadonomy The Netlify build works for me. Netlify is just slow the first time someone accesses one of the builds.

[amshakal]

Hi there, thanks for working on this. While I agree that some emojis are hard to recognise because the are too small, I do think in the proposed solution the emojis are a little too big. I worry that with this implementation, the emojis take up too much attention and might distract the users, along with increasing the height of each line.

[rkfg]

I've been using this patch since I opened this PR and I can't say the emojis are too big. They're approximately the same size as in Discord, readable and not distracting at all (their purpose is to quickly convey an emotion, if you have to spend a lot of time looking narrowly at them they fail that purpose). And as you can tell from the screenshots above, they don't increase the line height.

We have huge images that take 2/3 of the screen height and they're somehow not considered distracting. I understand it's subjective but the default size is so small it's not possible to tell what emoji there is. Maybe it's easier if your font is large but it's not a solution. Almost every messenger/social media website/app I saw shows them bigger than the regular text. See Twitter for example. On GitHub they're also too small imo but still bigger than the text.

[amshakal]

Like I said earlier, I agree that emojis need to be bigger and currently it's hard to view them as they are. I was wondering if they could be reduced a smidge bit so it doesn't seem drastically and distractingly big. It is definitely subjective but I can user test this internally and see what different users think to get some validation.

I also want to add that I am not sure if it's fair to compare images to emojis. They both have different intent and purpose.

[amshakal]

Upon further deep dive into this, I noticed that how slack and apple treat emojis might be the sweet balance we were looking for. It's bigger than what we have currently but smaller than what you have proposed. Attaching a screenshot of how the notes app treats it for reference:

The rationale to reduce the size from what has been implemented in the PR is that the emoji size is too big and demands a lot more attention than it should. Upon testing it with 5 other users this morning, I found that people were skimming through the text and focusing more on emojis. The feedback was unanimous that there is a need to increase the emoji size but not to this extent.

I worry that implementing this as is might disrupt how users currently read messages on the timeline, so I would suggest reducing the size of the emojis a little?

[rkfg]

Does this look better? I used 1.8rem instead of 2rem as it was before. 1.5rem looks too small to me:

[amshakal]

Yes it does. 👯

[turt2live]

I missed the design approval on this, sorry. It still looks good code-wise, so landing.

Thanks!