Emoji support

[otopba]

Hi!
I'd love to be able to display emoji.
Because right now, it is not displayed correctly. I will be very thankful for it!

[afester]

You can use the custom segment support introduced with #356. See the RichTextEditor demo for an example how to show images inline.

[JordanMartinez]

@otopba Could you clarify what you mean by "it is not displayed correctly?"

[otopba]

@afester ok, thx
@JordanMartinez

[afester]

How did you add the emojis? Can you share some code (like, the line where you actually add the emojis).
I suppose that you simply tried to add the emojis as UNICODE emojis - in that case, it looks like your font does not contain the necessary glyphs to render those "characters".

[otopba]

@afester It appears if you copy and paste them into the javaFX window. Yes, there are problems with the font and that's why I wrote this post =)

[JordanMartinez]

@otopba So would this be a clipboard and style codecs issue? Copy and paste is implemented via ClipboardActions.

[otopba]

@JordanMartinez Emoji do not appear. Whether it's copying or reading from a file , it is simply not displayed.

[afester]

The font you are using does not have the required glyphs to render the UNICODE emojis.

I have verified this with the JavaKeywords demo. I added the following line to JavaKeywords.java to render a Euro character (U+20AC) and an emoji (U+1F600) (note that the UNICODE codepoints for emojis require a surrogate pair since they are encoded with more than 16 bit):

...
"/* T\u20acs\uD83D\uDE00t */",
"public class Foo extends Bar implements Baz {",
...

The result is what you also observed - the emoji is rendered as square:

Now, I applied the following modifications to apply a font which contains glyphs for the Unicode Emojis (see also http://stackoverflow.com/a/16866962/1611055):

• I downloaded an appropriate font (https://github.com/MorbZ/OpenSansEmoji/blob/master/OpenSansEmoji.ttf) and put it in the org.fxmisc.richtext.demo package

• In the demo's start method, I added code to load the font: Font.loadFont(JavaKeywords.class.getResource("OpenSansEmoji.ttf").toExternalForm(), 10);

• In the java-keywords.css file, I added

  .paragraph-box {
  	-fx-font-family: "OpenSansEmoji";
  }
  

  so that the font is being applied to the paragraph box nodes.

Now, the text is rendered like this:

Note that all characters are now rendered with the OpenSansEmoji font - you might need to put the emojis into a separate segment and apply the font to this segment only, so that the rest of your document is rendered with your default font.

[JordanMartinez]

@afester Sorry. I thought that was the issue, but since @otopba mentioned copy and paste, I thought I should ask.

In that case, this isn't an issue with RichTextFX. We should still include a note about it in the Developer's guide.

[JordanMartinez]

Ok, I've added an initial page for that.

[JordanMartinez]

Closing this issue as @afester has demonstrated why the glyphs weren't appearing and has written how to add support for them in the wiki.