0

If I type emojis here like , you'll probably see colored sprites.

If you copy and paste that into Windows Notepad / Notepad++, you'll see something like this.

dinosaur and graduation cap in notepad

If you copy-and-paste that back into another text editor, it'll present normally.

Can I achieve the rendering effect of Notepad in CSS? I would prefer not to export / load my own custom SVGs or use JS if possible, and I would like copy-and-pasting into other applications to render emojis normally, as is the case with Notepad.

The non-accepted response here How would I change the color of an emoji? remarks that one can modify an emoji with a trailing \FE0E to use Unicode Variation Selector 15 (VS15) which enables text presentation. However, adding such a character would override rendering in other applications after copy-pasting, which is undesirable.

There was a CSS draft https://github.com/w3c/csswg-drafts/issues/1144 which proposed adding font-presentation: auto | text | emoji | text-override | emoji-override to CSS but the specific issue hasn't progressed since 2017 & I'm unaware if progress has continued elsewhere.

Warty
  • 7,237
  • 1
  • 31
  • 49
  • Things I've tried: 1. googling (I'm probably using the wrong queries) 2. setting font to something like Lucida Console. The best alternative I've found replaces the entire emoji with an unblurred drop-shadow, which unacceptably doesn't preserve cute details like the dinosaur's adorable dot-eye and specs. That's exemplified here https://www.bram.us/2016/10/06/emoji-silhouettes-and-emoji-outlines-with-css/ but for example their rocket's fire gets muddled with the ship's contours. – Warty Oct 02 '20 at 13:17
  • So not related to [this](https://stackoverflow.com/questions/35000876/how-would-i-change-the-color-of-an-emoji) – mplungjan Oct 02 '20 at 13:55
  • 1
    Thanks for the reopen, I've extended the question with knowledge since learned about Unicode VS15 & the proposed font-presentation CSS addition. I still don't have a great solution. – Warty Oct 02 '20 at 14:06

1 Answers1

0

This should become trivially possible via CSS whenever the proposed CSS Fonts Module Level 4 goes into effect. See Section 9.3 Selecting the text presentation style: The font-variant-emoji property of https://drafts.csswg.org/css-fonts-4/#font-variant-emoji-prop

In the meantime, here is a workaround that supports copy-and-pasting by exploiting the fact that CSS generated content is not captured in copy/paste operations. This is incompatible with controls like text inputs, though.

In CSS:

.emoji::after {
   display: inline;
   content: '\FE0E';
}

And HTML:

Lorem<span class="emoji">&#x1F393;</span>Ipsum
Lorem<span class="emoji">&#x1F995;</span>Ipsum

This renders the graduation cap correctly, but strangely enough not the dinosaur. It doesn't work for me if I copy-paste emojis directly into source; you need to specify the codepoints explicitly, not sure how that works.

enter image description here

Copy-and-pasting the text does not copy-and-paste the VS15 codepoint as we'd hope:

LoremIpsum Lorem︎Ipsum
Warty
  • 7,237
  • 1
  • 31
  • 49
  • It's been nearly a decade since I've followed web working groups, so if someone would like to update/amend my answer describing what this story actually looks like over the next few years that'd be appreciated. – Warty Oct 02 '20 at 14:29
  • I have no clue whether HTML is actually supposed to support this hack or if this is undefined behavior. Logically I'd have expected one element's text to be isolated from another element's text, though perhaps `inline` semantically somehow actually means "all our text is concatenated". – Warty Oct 02 '20 at 14:33