TextInput rendering certain characters as boxes

[illright]

There is a certain set of Unicode characters that are rendered as boxes in the TextInput.
What I mean is that although the characters are included in the font and don't seem to have much of a difference from other (letters and stuff like that), their texture is not shown in TextInput and Label widgets. The characters that were used in the test are emojis in range 0x1F600-0x1F61F

Here are some screenshots to describe the problem
This is how the text looks in LibreOffice (.txt file): And this is what a TextInput displays:

Here is a question on Stack Overflow about this problem

OS: Ubuntu 16.04 Python: 3.5.2 Kivy: 1.9.2-dev0 (daily build) Text provider: sdl2 Used font: NotoSans-Regular (get it from Google)

[KeyWeeUsr]

Finally! I was finally able to reproduce the same inserting of the emoji I did before with the same font you have.

Samsung's default keyboard, kivy-master, android 4.4.2

the first up-left emoji character is displayed hm... not exactly as you'd expect, but as I mentioned. However I'm sorry to tell that the rest of emojis don't work for me with this font and are displayed only as the boxes above.

[illright]

@KeyWeeUsr no, this character is displayed as expected. In Unicode, there are two emojis (or more, idk) that are not part of the main emoji range (link here). And apparently these characters are not in the "set" that I've mentioned so they are displayed both in your Android and in my PC.
I assume this issue could have something to do with the glyph complexity

EDIT Never mind, this has nothing to do with glyphs. I've even entirely copied a glyph from a displayable character, nothing changed. Moreover, if I take a smile glyph and copy it to a different character (from Private Use Area, for instance), it displays just fine. I'm out of ideas

[tito]

Are you sure the glyph is contained in the font? Cause unlike the Libreoffice or the OS, currently, we don't have glyph fallback at all. Either the glyph is contained in the font, either it's not. This is something we need to work on.

I tried to test with https://fonts.google.com/?query=noto on the glyph U+1F600 (😀), it appear as a box too on Google Font. You can try to analyse the font more deeply to see if it exists (or very hackish, make a webpage, include noto, use it as default, put your smiley somewhere, then inspect the element, go to the "computed styles", at the bottom, you'll see the real font used for the glyph (if you write a sentence, it will show how many glyph are rendered from this font, and how many from anothers.)

Kivy itself have no issue to render exotic glyph as long as they are included in the font :)

[illright]

@tito I've checked it with High-Logic Font Creator, the glyph definitely is in the .ttf font. I don't know what have you seen on Google Font, as my browser displays both U+1F600 and U+1F601. But I installed the Noto Sans font system-wide

[udiboy1209]

@Leva7 check the character list here : https://fonts.google.com/specimen/Noto+Sans . It doesn't show your glyph.

[tito]

Yes, your glyph is not in the font. I download Noto Sans Regular.ttf, used http://torinak.com/font/lsfont.html Import, see all the glyph in it, your smiley is not.

Glyph-fallback is something missing in Kivy

[illright]

@tito @udiboy1209 Here's the thing, should have mentioned earlier. I manually combined the Noto Emoji and Noto Sans Regular, so I see these glyphs. But even then, if I use the default non-modified Noto Emoji, it still doesn't show it

[KeyWeeUsr]

I see emojis (the grinning one mainly) in browser as Segoe UI Emoji or EmojiOne font. I tried to use the font (it's in C:/Windows/Fonts, I'm not sure about license so you need to rip it yourself from there) and also the EmojiOne, but guess what...

Yeah, nothing. I was totally confused, because I put in python directly u"\U0001F600", but then I opened the files with http://torinak.com/font/lsfont.html

Android Emoji - http://forum.xda-developers.com/attachment.php?attachmentid=1315721&d=1347277568 totally blank

Emoji One - https://github.com/eosrei/emojione-color-font/releases/download/v1.3/EmojiOneColor-SVGinOT-1.3-Win.zip the same and also for Noto fonts, which you can see in the upper part of my image.

If however such images were available in the font file, then you'd see the bottom part of my image:

So I can suggest you to try somehow place the emoji images into the font file until you actually see them for example through that website (seems the most reliable now as I don't have font creator or similar app). Then it should render them correctly, but even that is kind of questionable to me. I'm worried about the color - you might end up with b&w emoji anyway even if you paste into file non-b&w emoji.

Another edit:

I've searched a little and I think your best guess it to use DroidSansFallback.ttf (in the .7z file), which has quite a lot of emoji-related content, but then again... half of the file consists of chinese characters. + who knows what is it licensed under. Or AppleColorEmoji.ttf (only on apple devices) but afaik, that one is proprietary and most likely you can't (legally) include it in github repo.

For future cases if someone was interested in making a pull request I put here links to these questions:

• one.
• two
• render color emoji with C and Freetype
• how chromium does that

Another edit:

I opened some files with fontforge and here's very nice difference between some of the emoji, which might be even the reason why it doesn't display correctly:

The unicode char is always displayed as "0000" although when I copy-pasted the char to chrome, it changes into correct emoji.

[illright]

@tito @KeyWeeUsr I think there's some issue with the way Kivy and torinak.com/font/lsfont.html read the font. When I've loaded the NotoEmoji-Regular.ttf in there, I could only see glyphs up to 0xFFFF, even though the Unicode range is greater and there clearly are more glyphs outside 0x0000 - 0xFFFF (that again is proven by LibreOffice usage and viewing it inside High-Logic Font Creator). Is that a possibility?

@udiboy1209 I don't see a character list in the link you provided, could you show me please?

[KeyWeeUsr]

@Leva7 Ding ding, you found the problem!

@tito http://www.filedropper.com/osetest I put some emoji from the file into a separate test ttf font. There are emojis for range a-z, which are rendered correctly as b&w. Which triggers a question - why the range >FFFF isn't supported / renders boxes?

[dessant]

I don't see the emoji either with this example:

from kivy.app import App
from kivy.lang import Builder

kv = """
GridLayout:
    cols: 1
    Label:
        font_name: 'NotoEmoji-Regular.ttf'
        text: '\U0001F600'
    TextInput:
        font_name: 'NotoEmoji-Regular.ttf'
        text: '\U0001F600'
"""


class TestApp(App):
    def build(self):
        return Builder.load_string(kv)

if __name__ == '__main__':
    TestApp().run()

[goffi-contrib]

Hello, I have the same issue with a Label (tested on 1.9.1 and git). The following code reproduce the issue:

#!/usr/bin/env python2
#-*- coding: utf-8 -*-

from kivy.app import App
from kivy.lang import Builder

root = Builder.load_string(u'''
Label:
    text: u"😉"
    font_size: '64pt'
    font_name: "/usr/share/fonts/noto/NotoEmoji-Regular.ttf"
''')


class Label(App):
    def build(self):
        return root

if __name__ == '__main__':
    Label().run()

After spending a lot of time on it, I finally found that it is due to this bug: https://github.com/kivy/kivy/issues/2761

I've checked, the bug is still here, and if you do export KIVY_TEXT=pil the smiley is shown as expected.

I think it would be interesting to consider integrating Pango, this would solve this issue, handle fallbacks and multilingual texts. Actually it seems that some work has already be done in this direction: https://github.com/kivy/kivy/issues/2669#issuecomment-64964386

@kived is the Pango rendered still in progress or is it abandoned? Thanks

[KeyWeeUsr]

@goffi-contrib I don't see it with master and PIL. Not the exact copied emoji, nor unicode string in the example above. Could you test with 1.9.2?

[goffi-contrib]

hello @KeyWeeUsr . I've tested again on the last git (tested on Arch with aur/python2-kivy-git), and I can confirm it's still the same: a square with default text renderer (sdl2), while the emoji appears correctly with PIL (using export KIVY_TEXT=pil).

I really think integrating Pango is best way to fix that and other text issues.

[dessant]

I can't make it work with the Pillow text provider either. Windows 10, Python 3.4.4, Kivy 57d41c9, Pillow 4.0.0.

[KeyWeeUsr]

Same here with Python 3.5.2 and Win 8.1. I don't think using the old PIL (e.g. 1.1.7) instead of Pillow would help here. @goffi-contrib could you test on Windows?

[goffi-contrib]

Hi, no I can't sorry, I have no Windows machine available.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[jd-solanki]

It's been 6 years and can't we render the emoji in kivy 🤯

[Sahil-pixel]

is this solved or not ?

[kengoon]

with the latest version of kivy(master branch 2.2.0.dev0), I can confirm that kivy actually renders colored emojis using sdl2 as the text provider.

code

from kivy.app import App
from kivy.lang import Builder

root = Builder.load_string(u'''
Label:
    text: "🔞"
    font_size: '64pt'
    font_name: "/usr/share/fonts/truetype/noto/NotoColorEmoji.ttf"
''')


class Label(App):
    def build(self):
        return root

if __name__ == '__main__':
    Label().run()

[kengoon]

there are issues though, the font_size does not respond and the text does not render with color on TextInput widget

[RobinPicard]

I've opened a PR to fix the issue with the color of emojis in TextInput widgets: https://github.com/kivy/kivy/pull/7997

[jd-solanki]

I've opened a PR to fix the issue with the color of emojis in TextInput widgets: #7997

oh, thanks so much for this ❤️

[RobinPicard]

there are issues though, the font_size does not respond and the text does not render with color on TextInput widget

I think the font size issue is unrelated. I've tried with a different emoji font than NotoColorEmoji and things worked fine. The problem comes from the values returned by the TTF_OpenFont function with this specific font. I guess there's something wrong with either the font or SDL_ttf

[kengoon]

I think the font size issue is unrelated. I've tried with a different emoji font than NotoColorEmoji and things worked fine. The problem comes from the values returned by the TTF_OpenFont function with this specific font. I guess there's something wrong with either the font or SDL_ttf

@RobinPicard please can you refer to the emoji font you used, I can't seem to find another colored emoji apart from NotoColorEmoji

[RobinPicard]

I tried with Noto Emoji (which is not colored, but I don't think it matters): https://fonts.google.com/noto/specimen/Noto+Emoji. In any case, the problem does not seem to be in Kivy's code

[kengoon]

It matters because it is not colored, I tried that too and it works perfect but not colored

[ElliotGarbus]

@Julian-O should the status be changed to has PR? see: #7997