Change the presentation of emojis to be plain-text-like with CSS?

Question

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.

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 font-presentation: auto | text | emoji | text-override | emoji-override 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.

Answer 1

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.

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

Lorem🎓Ipsum Lorem🦕︎Ipsum