1

I'm trying to render a custom checkbox in an Electron app.

:before {
    content: '✔';
}

It renders differently at random without any code changes:

enter image description here enter image description here

It seems that it defaults to a font Segoe UI Emoji. Is it possible to force rendering as left picture (not as emoji)?

Alex
  • 59,571
  • 22
  • 137
  • 126
  • 1
    Could you try set the font family to "Segoe UI Symbol", monospace? Not sure if this works for Electron app, works for preventing it in Edge where it also default renders UI Emoji. – Arno Tenkink May 30 '20 at 13:06
  • That seems to be working. Can't say 100% because it appeared at random though. Does this code also work in Mac & Linux, because I think they have different emoji fonts: `Apple Color Emoji` & `Noto Color Emoji`? – Alex May 30 '20 at 13:23
  • You can post it as an answer. – Alex May 30 '20 at 13:24
  • Your right Alex, I searched a bit more and think I found a solution but can't really test this but looking at the documation this could work. – Arno Tenkink May 31 '20 at 07:44
  • Related questions: https://stackoverflow.com/questions/24748565/prevent-html-entity-conversion-to-emoji, https://stackoverflow.com/questions/8208126/prevent-emoji-characters-from-showing – Arno Tenkink May 31 '20 at 07:54

1 Answers1

2

It's possible to override the Emoji rendering of a psuedo element. I would recommend trying to use a special unicode character. U+FE0E (0xFE0E). Like so: content: "\2714 \FE0E";

content: "[enter your emoji unicode here] \FE0E";

I used this convert tool to get the right CSS unicode for the emoji to place inside the 'content': https://r12a.github.io/app-conversion/

About U+FE0E

This codepoint may change the appearance of the preceding character. If that is a symbol, dingbat or emoji, U+FE0E forces it to be rendered in a textual fashion as compared to a colorful image. The Unicode standard defines some standardized variants. See also “Unicode symbol as text or emoji” for a discussion of this codepoint.

Sources: https://codepoints.net/U+FE0E, https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

Example:

.test:before {
  content: "✔";
}

.test2:before {
  content: "\2714 \FE0E";
}
<!-- if your looking in Chrome or Firefox this will both look the same -->
<div class="test"></div>
<div class="test2"></div>
Arno Tenkink
  • 1,480
  • 2
  • 9
  • 16