CODEWITHSUNDEEP
javascripthtmlcssangular
naoval
naoval

Reputation: 368

how to solve different emoji on textarea field between windows and mac

i have chatbot, in the textarea i can add emoji like this

enter image description here

i'm using this library called ngx-emoj https://github.com/ahkohd/ngx-emoj but when i open the chatbot in mac here's what it looks like

enter image description here

it's overlapping, is it because the font for emoji is not the same? both windows and mac, the font family is the same using roboto. Did anyone have any idea why?

Upvotes: 0

Views: 729

Answers (1)

Atheesh Thirumalairajan
Atheesh Thirumalairajan

Reputation: 812

Even if you use the same font i.e., Roboto, It is Apple who decides which font their web-browsers should display. In windows, the Emojis are in Microsoft's Font (if you closely notice, the flat emojis are not in roboto, they are in Microsoft Emoji). In Mac, I think Apple uses Helvetica for Emojis.

This happens because, Operating System Developers, Override your preferences in case of Emojis but do not override for normal text. That is why the text will look same but Emojis wont despite you setting Roboto in both.

I think the library you are using is not optimized for Mac. The better option would be allowing the Operating System's Default Emoji Picker to function. i.e. (Win + Period) in Windows, etc.

It looks like this on linux: (I used the GitHub Project you mentioned) Look on Linux

An from your website: enter image description here

Upvotes: 1

Related Questions