Problem showing EMOJIS in HTML

General
1

I need help to show emojis. In HTML templates I can not show emoji characters. thanks for your help

2

Can you explain, what you tried so far and what does not work?

3

You can have a look at https://twemoji.twitter.com/

4

I kind of know WHAT emojis are. The question was, what has been done to try to play them in Caspar? Any template that were built or the like? Or just asking out of the blue?

5

Didi - he’s pointing him to use the Twitter Emoji library.

The problem is that browsers have limited, built-in, emoji capabilities. I use twemoji myself.

6

Ah! I see sorry. By the way we missed you at IBC, Hreinn :cry:

1 Like
7

I’ve been able to use system font emojis (Windows 10 emojis) by simply writing them in my templates. The only caveat is that I must define CSS rules for those characters to use Segoe UI Emoji font.

I’ll try to show an example as soon as I’m back on my computer.

8

To show emojis in my template, first I had to create a CSS selector for emojis:

.emoji {
  font-family: "Segoe UI Emoji", sans-serif;
}

Then, when there’s an emoji to be shown, I wrap it in a span tag with the emoji class:

<p>133 is the number to call the <span class="emoji">👮‍♀️</span> police.</p>

Now, I haven’t tested this using template data, but the underlying idea in HTML is as shown. I have a working example at this website which you can play on CasparCG Server. The CEF version included with Server defines if emojis are shown in color or not.

9

You could simplify that by using unicode-range in CSS - then you wouldn’t need the spans.

1 Like
10

That sounds interesting. I’ll try it and come back with results. Thanks for the tip.