search

pladaria / react-emojione

A tiny library to use emojis in React
186 stars 32 forks source link

Why textIndent: -9999em? #7

Closed allenkim67 closed 7 years ago

allenkim67 commented 7 years ago

I'm seeing that by default the emoji has a textIndent of -9999em. This causes the emoji to be shifted to the left until it's off the page and can't be seen. When I set this property to 0, the emoji appears in the normal place. Is there a reason for this?

pladaria commented 7 years ago

This is because we don't want to show the text. What we want is the background image. Having the text displaced allows us to copy&paste a text selection which contains emojis. I know it is hacky, better ideas are welcome :)

emmerich commented 4 years ago

Can we reopen this?

If anyone is using drag and drop on an element that contains an Emoji, the huge text indent will cause the "ghost element" (the drag preview) to be huge (9999em wide).

You can achieve the same goal as -9999em if you do:

font-size: 0px;
color: rgba(0, 0, 0, 0);

on the element. Can still be copied, and doesn't cause the element to get completely skewed.