0

I was using emoji in my Github profile readme file. There I placed three emojis side by side. Like the following:

I would like to introduce myself as a self-taught  **Frontend Software Engineer**

Now when I visit the readme from Mac, these emojis are overlapped. But in the Windows OS, it's working fine.


In the Mac:

enter image description here

In the Windows:

enter image description here

Can anybody tell me what's the reason behind that? And what's the workaround for this problem? Thanks in Advance.

Showrin Barua
  • 1,737
  • 1
  • 11
  • 22
  • 2
    It might be helpful to say what browser you are using – Andrew May 10 '21 at 14:10
  • Do you have a link to the page? On Stack Overflow, reading this on a Mac using Safari, Firefox, and Brave, the problem doesn't reproduce on this page in your code block. That suggests that something in the MD rendering engine may be involved, or in the browser's text layout engine. Are you using the same browser on both platforms? (I will say that the emoji are slightly closer in Firefox than in Brave or Safari, but not overlapping .) – Rob Napier May 10 '21 at 15:06
  • 1
    Reproduced. This only happens on Brave for me, and not Firefox or Safari, so I assume it's a Chrome issue. https://github.com/rnapier/rnapier – Rob Napier May 10 '21 at 15:14
  • 1
    Found it. Known Chrome bug when using a non-Retina screen on a Mac. (https://bugs.chromium.org/p/chromium/issues/detail?id=596223) and duplicate of https://stackoverflow.com/questions/42016125/emoji-rendered-in-chrome-have-different-widths-than-in-other-browsers I can reproduce this on an old external monitor, but it doesn't reproduce on my laptop's monitor. – Rob Napier May 10 '21 at 15:24
  • I found this problem in Chrome on mac. – Showrin Barua May 10 '21 at 18:34
  • @RobNapier Here's the link https://github.com/Showrin. You can find them in the readme.md file. – Showrin Barua May 10 '21 at 18:39
  • Yep, this looks exactly like the Chrome-non-retina bug. I don't know any way to fix this via rendered Markdown until Chrome fixes their bug. You can fix it with your own style sheets as describe in https://stackoverflow.com/a/44145771/97337 but I don't believe you can apply a style sheet to GitHub pages. – Rob Napier May 10 '21 at 18:49
  • Tried brother. But github don't support them :( @RobNapier – Showrin Barua May 10 '21 at 19:40

1 Answers1

2

The most obvious workaround is just to space out the emojis ie

I would like to introduce myself as a self-taught  **Frontend Software Engineer**

and it will look like this on Windows-Chrome:

enter image description here

Andrew
  • 1,238
  • 3
  • 13
  • 28