How to display a unicode char (emoji) in TLF (RichEdit control)

classic Classic list List threaded Threaded
12 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

How to display a unicode char (emoji) in TLF (RichEdit control)

Erik J. Thomas
Hey all:

Do you have any idea how I can display this Unicode character U+1F601 or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?

Thanks!

Erik

For additional background on my problem, read on...

I'm implementing a mobile social media feed display using TLF (spark RichText) to display inline emoji. The user enters a short message into a TextInput control on the phone, and using the soft keyboard selects emoji keyboard, selects an emoji to display with the text and posts their update.

Getting the text from the user works fine and the emoji is represented as UTF or Unicode value though I don't know how to verify.

The TextInput control on the device shows the emoji rendering perfectly (spark TextInput):


The value in the IntelliJ debugger's Variables view also renders the Unicode or UTF bytes correctly:


But when I attempt to set the contents of the RichText control with the contents of the input field, the emoji is lost:


I have tried many approaches, some are:
var value:String = textInput.text; // this contains the emoji:
richEditControl.text = value;

richEditControl.textFlow = TextFlowUtil.importFromString(value);

richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT);

richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.PLAIN_TEXT_FORMAT);
They each fail to display the emoji. I can display complex content in the same control no problem and I'm pretty familiar with TLF:


I want to deal with HTML markup and TextConverter rather than composing the TLF in code, but if I have to go that route, I'm willing to if it works.

But getting the RichText control's TextFlow to display a UNICODE character is a mystery to me and googling for answers has not been fruitful.

I understand there is some question of whether Android phones will display the equivalent emoji as on iPhone, I get that. But looking at this chart, it should be possible for the most part:


My problem should be a simple as just learning how to display this Unicode character U+1F601 or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF. Is it possible? Thanks! Erik


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

Erik J. Thomas
Sorry, wherever I wrote "RichEdit" I meant to write "RichText". Thanks.

Erik

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

clintm
In reply to this post by Erik J. Thomas

On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]> wrote:
Hey all:

Do you have any idea how I can display this Unicode character U+1F601 or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?

Thanks!

Erik

For additional background on my problem, read on...

I'm implementing a mobile social media feed display using TLF (spark RichText) to display inline emoji. The user enters a short message into a TextInput control on the phone, and using the soft keyboard selects emoji keyboard, selects an emoji to display with the text and posts their update.

Getting the text from the user works fine and the emoji is represented as UTF or Unicode value though I don't know how to verify.

The TextInput control on the device shows the emoji rendering perfectly (spark TextInput):


The value in the IntelliJ debugger's Variables view also renders the Unicode or UTF bytes correctly:


But when I attempt to set the contents of the RichText control with the contents of the input field, the emoji is lost:


I have tried many approaches, some are:
var value:String = textInput.text; // this contains the emoji:
richEditControl.text = value;

richEditControl.textFlow = TextFlowUtil.importFromString(value);

richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT);

richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.PLAIN_TEXT_FORMAT);
They each fail to display the emoji. I can display complex content in the same control no problem and I'm pretty familiar with TLF:


I want to deal with HTML markup and TextConverter rather than composing the TLF in code, but if I have to go that route, I'm willing to if it works.

But getting the RichText control's TextFlow to display a UNICODE character is a mystery to me and googling for answers has not been fruitful.

I understand there is some question of whether Android phones will display the equivalent emoji as on iPhone, I get that. But looking at this chart, it should be possible for the most part:


My problem should be a simple as just learning how to display this Unicode character U+1F601 or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF. Is it possible? Thanks! Erik



Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

clintm
as the link mentions… this most likely won't work on android (or windows) as they don't have access to the apple emoji font.

On Mon, Apr 17, 2017 at 3:28 PM, Clint M <[hidden email]> wrote:

On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]> wrote:
Hey all:

Do you have any idea how I can display this Unicode character U+1F601 or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?

Thanks!

Erik

For additional background on my problem, read on...

I'm implementing a mobile social media feed display using TLF (spark RichText) to display inline emoji. The user enters a short message into a TextInput control on the phone, and using the soft keyboard selects emoji keyboard, selects an emoji to display with the text and posts their update.

Getting the text from the user works fine and the emoji is represented as UTF or Unicode value though I don't know how to verify.

The TextInput control on the device shows the emoji rendering perfectly (spark TextInput):


The value in the IntelliJ debugger's Variables view also renders the Unicode or UTF bytes correctly:


But when I attempt to set the contents of the RichText control with the contents of the input field, the emoji is lost:


I have tried many approaches, some are:
var value:String = textInput.text; // this contains the emoji:
richEditControl.text = value;

richEditControl.textFlow = TextFlowUtil.importFromString(value);

richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT);

richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.PLAIN_TEXT_FORMAT);
They each fail to display the emoji. I can display complex content in the same control no problem and I'm pretty familiar with TLF:


I want to deal with HTML markup and TextConverter rather than composing the TLF in code, but if I have to go that route, I'm willing to if it works.

But getting the RichText control's TextFlow to display a UNICODE character is a mystery to me and googling for answers has not been fruitful.

I understand there is some question of whether Android phones will display the equivalent emoji as on iPhone, I get that. But looking at this chart, it should be possible for the most part:


My problem should be a simple as just learning how to display this Unicode character U+1F601 or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF. Is it possible? Thanks! Erik




Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

Erik J. Thomas
In reply to this post by clintm
Thanks Clint for your suggestion but this approach doesn't work either. Tried using every way I know how to assign the content to the RichText control. It could still be my error on how I'm assigning content to the TLF document.

There must be some way to make this work since on can supposedly display Kanji characters in this way if the app is localized. The internals must be there for displaying multi-byte and/or unicode somewhere. Guess I'll resort to diving into RichText code and see what I can find.

Thanks again.

Erik

> On Apr 17, 2017, at 3:28 PM, Clint M <[hidden email]> wrote:
>
> maybe this?
> http://stackoverflow.com/questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
> txt2.text = decodeURI(txt1.text);
>
> On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email] <mailto:[hidden email]>> wrote:
> Hey all:
>
> Do you have any idea how I can display this Unicode character U+1F601 <https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
>
> Thanks!
>
> Erik
>
> For additional background on my problem, read on...
>
> I'm implementing a mobile social media feed display using TLF (spark RichText) to display inline emoji. The user enters a short message into a TextInput control on the phone, and using the soft keyboard selects emoji keyboard, selects an emoji to display with the text and posts their update.
>
> Getting the text from the user works fine and the emoji is represented as UTF or Unicode value though I don't know how to verify.
>
> The TextInput control on the device shows the emoji rendering perfectly (spark TextInput):
>
>
>
> The value in the IntelliJ debugger's Variables view also renders the Unicode or UTF bytes correctly:
>
>
>
> But when I attempt to set the contents of the RichText control with the contents of the input field, the emoji is lost:
>
>
>
> I have tried many approaches, some are:
> var value:String = textInput.text; // this contains the emoji:
> richEditControl.text = value;
>
> richEditControl.textFlow = TextFlowUtil.importFromString(value);
>
> richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT);
>
> richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.PLAIN_TEXT_FORMAT);
> They each fail to display the emoji. I can display complex content in the same control no problem and I'm pretty familiar with TLF:
>
>
>
> I want to deal with HTML markup and TextConverter rather than composing the TLF in code, but if I have to go that route, I'm willing to if it works.
>
> But getting the RichText control's TextFlow to display a UNICODE character is a mystery to me and googling for answers has not been fruitful.
>
> I understand there is some question of whether Android phones will display the equivalent emoji as on iPhone, I get that. But looking at this chart, it should be possible for the most part:
>
> https://apps.timwhitlock.info/emoji/tables/unicode <https://apps.timwhitlock.info/emoji/tables/unicode>
>
> My problem should be a simple as just learning how to display this Unicode character U+1F601 <https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF. Is it possible? Thanks! Erik
>
>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

OmPrakash Muppirala
We have FontAwesome working fine with the Flex SDK.

Here is a usage example:
https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914409a1a4ae2/frameworks/projects/flatspark/src/flatspark/skins/ComboBoxButtonSkin.mxml#L106
Here is the unicode definition:
https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914409a1a4ae2/frameworks/projects/flatspark/src/flatspark/utils/AwesomeUtils.as#L131

Of course, this is from a custom loaded font.

Perhaps this could give you a hint on how you can achieve yours?

Thanks,
Om



On Mon, Apr 17, 2017 at 3:42 PM, Erik J. Thomas <[hidden email]> wrote:

> Thanks Clint for your suggestion but this approach doesn't work either.
> Tried using every way I know how to assign the content to the RichText
> control. It could still be my error on how I'm assigning content to the TLF
> document.
>
> There must be some way to make this work since on can supposedly display
> Kanji characters in this way if the app is localized. The internals must be
> there for displaying multi-byte and/or unicode somewhere. Guess I'll resort
> to diving into RichText code and see what I can find.
>
> Thanks again.
>
> Erik
>
> > On Apr 17, 2017, at 3:28 PM, Clint M <[hidden email]> wrote:
> >
> > maybe this?
> > http://stackoverflow.com/questions/37192684/stagetext-
> and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/
> questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
> > txt2.text = decodeURI(txt1.text);
> >
> > On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]
> <mailto:[hidden email]>> wrote:
> > Hey all:
> >
> > Do you have any idea how I can display this Unicode character U+1F601 <
> https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8
> Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
> >
> > Thanks!
> >
> > Erik
> >
> > For additional background on my problem, read on...
> >
> > I'm implementing a mobile social media feed display using TLF (spark
> RichText) to display inline emoji. The user enters a short message into a
> TextInput control on the phone, and using the soft keyboard selects emoji
> keyboard, selects an emoji to display with the text and posts their update.
> >
> > Getting the text from the user works fine and the emoji is represented
> as UTF or Unicode value though I don't know how to verify.
> >
> > The TextInput control on the device shows the emoji rendering perfectly
> (spark TextInput):
> >
> >
> >
> > The value in the IntelliJ debugger's Variables view also renders the
> Unicode or UTF bytes correctly:
> >
> >
> >
> > But when I attempt to set the contents of the RichText control with the
> contents of the input field, the emoji is lost:
> >
> >
> >
> > I have tried many approaches, some are:
> > var value:String = textInput.text; // this contains the emoji:
> > richEditControl.text = value;
> >
> > richEditControl.textFlow = TextFlowUtil.importFromString(value);
> >
> > richEditControl.textFlow = TextConverter.importToFlow(value,
> TextConverter.TEXT_FIELD_HTML_FORMAT);
> >
> > richEditControl.textFlow = TextConverter.importToFlow(value,
> TextConverter.PLAIN_TEXT_FORMAT);
> > They each fail to display the emoji. I can display complex content in
> the same control no problem and I'm pretty familiar with TLF:
> >
> >
> >
> > I want to deal with HTML markup and TextConverter rather than composing
> the TLF in code, but if I have to go that route, I'm willing to if it works.
> >
> > But getting the RichText control's TextFlow to display a UNICODE
> character is a mystery to me and googling for answers has not been fruitful.
> >
> > I understand there is some question of whether Android phones will
> display the equivalent emoji as on iPhone, I get that. But looking at this
> chart, it should be possible for the most part:
> >
> > https://apps.timwhitlock.info/emoji/tables/unicode <
> https://apps.timwhitlock.info/emoji/tables/unicode>
> >
> > My problem should be a simple as just learning how to display this
> Unicode character U+1F601 <https://apps.timwhitlock.
> info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81
> using TLF. Is it possible? Thanks! Erik
> >
> >
> >
>
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

Erik J. Thomas
In reply to this post by clintm
Hey Clint:

>> "this most likely won't work on android (or windows) as they don't have access to the apple emoji font"

Yeah, but I can't even get it to work from one control to another on the same platform (iPhone) in the same Flex mobile app, using the same fonts. So yeah, probably won't work on Android if it won't work anywhere at all. But I thought if I could learn to simply display an embedded UNICODE character in a Flex display control, that I might at least make this work on iOS and I could find some other way to convert from UNICODE to fontAwesome chars or something like that on Android.

Anyway, just surprised I can't display UNICODE chars in RichText.

But I see other apps that appear to just be displaying the standard UNICODE definitions for common emoji in this chart:

https://apps.timwhitlock.info/emoji/tables/unicode <https://apps.timwhitlock.info/emoji/tables/unicode>

Erik

> On Apr 17, 2017, at 3:32 PM, Clint M <[hidden email]> wrote:
>
> as the link mentions… this most likely won't work on android (or windows) as they don't have access to the apple emoji font.
>
> On Mon, Apr 17, 2017 at 3:28 PM, Clint M <[hidden email] <mailto:[hidden email]>> wrote:
> maybe this?
> http://stackoverflow.com/questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
> txt2.text = decodeURI(txt1.text);
>
> On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email] <mailto:[hidden email]>> wrote:
> Hey all:
>
> Do you have any idea how I can display this Unicode character U+1F601 <https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
>
> Thanks!
>
> Erik
>
> For additional background on my problem, read on...
>
> I'm implementing a mobile social media feed display using TLF (spark RichText) to display inline emoji. The user enters a short message into a TextInput control on the phone, and using the soft keyboard selects emoji keyboard, selects an emoji to display with the text and posts their update.
>
> Getting the text from the user works fine and the emoji is represented as UTF or Unicode value though I don't know how to verify.
>
> The TextInput control on the device shows the emoji rendering perfectly (spark TextInput):
>
>
>
> The value in the IntelliJ debugger's Variables view also renders the Unicode or UTF bytes correctly:
>
>
>
> But when I attempt to set the contents of the RichText control with the contents of the input field, the emoji is lost:
>
>
>
> I have tried many approaches, some are:
> var value:String = textInput.text; // this contains the emoji:
> richEditControl.text = value;
>
> richEditControl.textFlow = TextFlowUtil.importFromString(value);
>
> richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.TEXT_FIELD_HTML_FORMAT);
>
> richEditControl.textFlow = TextConverter.importToFlow(value, TextConverter.PLAIN_TEXT_FORMAT);
> They each fail to display the emoji. I can display complex content in the same control no problem and I'm pretty familiar with TLF:
>
>
>
> I want to deal with HTML markup and TextConverter rather than composing the TLF in code, but if I have to go that route, I'm willing to if it works.
>
> But getting the RichText control's TextFlow to display a UNICODE character is a mystery to me and googling for answers has not been fruitful.
>
> I understand there is some question of whether Android phones will display the equivalent emoji as on iPhone, I get that. But looking at this chart, it should be possible for the most part:
>
> https://apps.timwhitlock.info/emoji/tables/unicode <https://apps.timwhitlock.info/emoji/tables/unicode>
>
> My problem should be a simple as just learning how to display this Unicode character U+1F601 <https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81 using TLF. Is it possible? Thanks! Erik
>
>
>
>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

clintm
In reply to this post by Erik J. Thomas
Ahh… ok I think I understand… you'd have to Embed the font first.
http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7f5f.html

There is a legal consideration whether you're allowed to embed the font and
use it in your app though.

On Mon, Apr 17, 2017 at 3:42 PM, Erik J. Thomas <[hidden email]> wrote:

> Thanks Clint for your suggestion but this approach doesn't work either.
> Tried using every way I know how to assign the content to the RichText
> control. It could still be my error on how I'm assigning content to the TLF
> document.
>
> There must be some way to make this work since on can supposedly display
> Kanji characters in this way if the app is localized. The internals must be
> there for displaying multi-byte and/or unicode somewhere. Guess I'll resort
> to diving into RichText code and see what I can find.
>
> Thanks again.
>
> Erik
>
> > On Apr 17, 2017, at 3:28 PM, Clint M <[hidden email]> wrote:
> >
> > maybe this?
> > http://stackoverflow.com/questions/37192684/stagetext-
> and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/
> questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
> > txt2.text = decodeURI(txt1.text);
> >
> > On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]
> <mailto:[hidden email]>> wrote:
> > Hey all:
> >
> > Do you have any idea how I can display this Unicode character U+1F601 <
> https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8
> Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
> >
> > Thanks!
> >
> > Erik
> >
> > For additional background on my problem, read on...
> >
> > I'm implementing a mobile social media feed display using TLF (spark
> RichText) to display inline emoji. The user enters a short message into a
> TextInput control on the phone, and using the soft keyboard selects emoji
> keyboard, selects an emoji to display with the text and posts their update.
> >
> > Getting the text from the user works fine and the emoji is represented
> as UTF or Unicode value though I don't know how to verify.
> >
> > The TextInput control on the device shows the emoji rendering perfectly
> (spark TextInput):
> >
> >
> >
> > The value in the IntelliJ debugger's Variables view also renders the
> Unicode or UTF bytes correctly:
> >
> >
> >
> > But when I attempt to set the contents of the RichText control with the
> contents of the input field, the emoji is lost:
> >
> >
> >
> > I have tried many approaches, some are:
> > var value:String = textInput.text; // this contains the emoji:
> > richEditControl.text = value;
> >
> > richEditControl.textFlow = TextFlowUtil.importFromString(value);
> >
> > richEditControl.textFlow = TextConverter.importToFlow(value,
> TextConverter.TEXT_FIELD_HTML_FORMAT);
> >
> > richEditControl.textFlow = TextConverter.importToFlow(value,
> TextConverter.PLAIN_TEXT_FORMAT);
> > They each fail to display the emoji. I can display complex content in
> the same control no problem and I'm pretty familiar with TLF:
> >
> >
> >
> > I want to deal with HTML markup and TextConverter rather than composing
> the TLF in code, but if I have to go that route, I'm willing to if it works.
> >
> > But getting the RichText control's TextFlow to display a UNICODE
> character is a mystery to me and googling for answers has not been fruitful.
> >
> > I understand there is some question of whether Android phones will
> display the equivalent emoji as on iPhone, I get that. But looking at this
> chart, it should be possible for the most part:
> >
> > https://apps.timwhitlock.info/emoji/tables/unicode <
> https://apps.timwhitlock.info/emoji/tables/unicode>
> >
> > My problem should be a simple as just learning how to display this
> Unicode character U+1F601 <https://apps.timwhitlock.
> info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81
> using TLF. Is it possible? Thanks! Erik
> >
> >
> >
>
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

Erik J. Thomas
In reply to this post by OmPrakash Muppirala
Hey Om:

Good suggestion, I use fontAwesome and love it.

How do you map the Unicode emoji char that is entered by the iOS softkeyboard to an equivalent fontAwesome character? That would be super helpful!

My only other concern there is embedding multiple fonts in the TLF code. I have tried mixing fonts with styles in HTML and using TextConverter to import that mark up and that doesn't work for some reason, though I think it's supposed to. I will work on that approach.

Thanks!

Erik

> On Apr 17, 2017, at 3:45 PM, OmPrakash Muppirala <[hidden email]> wrote:
>
> We have FontAwesome working fine with the Flex SDK.
>
> Here is a usage example:
> https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914409a1a4ae2/frameworks/projects/flatspark/src/flatspark/skins/ComboBoxButtonSkin.mxml#L106
> Here is the unicode definition:
> https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914409a1a4ae2/frameworks/projects/flatspark/src/flatspark/utils/AwesomeUtils.as#L131
>
> Of course, this is from a custom loaded font.
>
> Perhaps this could give you a hint on how you can achieve yours?
>
> Thanks,
> Om
>
>
>
> On Mon, Apr 17, 2017 at 3:42 PM, Erik J. Thomas <[hidden email]> wrote:
>
>> Thanks Clint for your suggestion but this approach doesn't work either.
>> Tried using every way I know how to assign the content to the RichText
>> control. It could still be my error on how I'm assigning content to the TLF
>> document.
>>
>> There must be some way to make this work since on can supposedly display
>> Kanji characters in this way if the app is localized. The internals must be
>> there for displaying multi-byte and/or unicode somewhere. Guess I'll resort
>> to diving into RichText code and see what I can find.
>>
>> Thanks again.
>>
>> Erik
>>
>>> On Apr 17, 2017, at 3:28 PM, Clint M <[hidden email]> wrote:
>>>
>>> maybe this?
>>> http://stackoverflow.com/questions/37192684/stagetext-
>> and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/
>> questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
>>> txt2.text = decodeURI(txt1.text);
>>>
>>> On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]
>> <mailto:[hidden email]>> wrote:
>>> Hey all:
>>>
>>> Do you have any idea how I can display this Unicode character U+1F601 <
>> https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8
>> Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
>>>
>>> Thanks!
>>>
>>> Erik
>>>
>>> For additional background on my problem, read on...
>>>
>>> I'm implementing a mobile social media feed display using TLF (spark
>> RichText) to display inline emoji. The user enters a short message into a
>> TextInput control on the phone, and using the soft keyboard selects emoji
>> keyboard, selects an emoji to display with the text and posts their update.
>>>
>>> Getting the text from the user works fine and the emoji is represented
>> as UTF or Unicode value though I don't know how to verify.
>>>
>>> The TextInput control on the device shows the emoji rendering perfectly
>> (spark TextInput):
>>>
>>>
>>>
>>> The value in the IntelliJ debugger's Variables view also renders the
>> Unicode or UTF bytes correctly:
>>>
>>>
>>>
>>> But when I attempt to set the contents of the RichText control with the
>> contents of the input field, the emoji is lost:
>>>
>>>
>>>
>>> I have tried many approaches, some are:
>>> var value:String = textInput.text; // this contains the emoji:
>>> richEditControl.text = value;
>>>
>>> richEditControl.textFlow = TextFlowUtil.importFromString(value);
>>>
>>> richEditControl.textFlow = TextConverter.importToFlow(value,
>> TextConverter.TEXT_FIELD_HTML_FORMAT);
>>>
>>> richEditControl.textFlow = TextConverter.importToFlow(value,
>> TextConverter.PLAIN_TEXT_FORMAT);
>>> They each fail to display the emoji. I can display complex content in
>> the same control no problem and I'm pretty familiar with TLF:
>>>
>>>
>>>
>>> I want to deal with HTML markup and TextConverter rather than composing
>> the TLF in code, but if I have to go that route, I'm willing to if it works.
>>>
>>> But getting the RichText control's TextFlow to display a UNICODE
>> character is a mystery to me and googling for answers has not been fruitful.
>>>
>>> I understand there is some question of whether Android phones will
>> display the equivalent emoji as on iPhone, I get that. But looking at this
>> chart, it should be possible for the most part:
>>>
>>> https://apps.timwhitlock.info/emoji/tables/unicode <
>> https://apps.timwhitlock.info/emoji/tables/unicode>
>>>
>>> My problem should be a simple as just learning how to display this
>> Unicode character U+1F601 <https://apps.timwhitlock.
>> info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81
>> using TLF. Is it possible? Thanks! Erik
>>>
>>>
>>>
>>
>>

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

OmPrakash Muppirala
Hmm, it would be hard to map an emoji char to fontawesome char.  I just
showed fontawesome as an example for usage.

For your case, maybe the free OpenSansEmoji font from here can help:
https://github.com/MorbZ/OpenSansEmoji

Then try creating a simple <s:Label>{your unicode string here}</s:Label>
and see if it works.

Thanks,
Om

On Mon, Apr 17, 2017 at 3:58 PM, Erik J. Thomas <[hidden email]> wrote:

> Hey Om:
>
> Good suggestion, I use fontAwesome and love it.
>
> How do you map the Unicode emoji char that is entered by the iOS
> softkeyboard to an equivalent fontAwesome character? That would be super
> helpful!
>
> My only other concern there is embedding multiple fonts in the TLF code. I
> have tried mixing fonts with styles in HTML and using TextConverter to
> import that mark up and that doesn't work for some reason, though I think
> it's supposed to. I will work on that approach.
>
> Thanks!
>
> Erik
>
> > On Apr 17, 2017, at 3:45 PM, OmPrakash Muppirala <[hidden email]>
> wrote:
> >
> > We have FontAwesome working fine with the Flex SDK.
> >
> > Here is a usage example:
> > https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914
> 409a1a4ae2/frameworks/projects/flatspark/src/flatspark/skins/
> ComboBoxButtonSkin.mxml#L106
> > Here is the unicode definition:
> > https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d608e6abc914
> 409a1a4ae2/frameworks/projects/flatspark/src/flatspark/utils/AwesomeUtils.
> as#L131
> >
> > Of course, this is from a custom loaded font.
> >
> > Perhaps this could give you a hint on how you can achieve yours?
> >
> > Thanks,
> > Om
> >
> >
> >
> > On Mon, Apr 17, 2017 at 3:42 PM, Erik J. Thomas <[hidden email]> wrote:
> >
> >> Thanks Clint for your suggestion but this approach doesn't work either.
> >> Tried using every way I know how to assign the content to the RichText
> >> control. It could still be my error on how I'm assigning content to the
> TLF
> >> document.
> >>
> >> There must be some way to make this work since on can supposedly display
> >> Kanji characters in this way if the app is localized. The internals
> must be
> >> there for displaying multi-byte and/or unicode somewhere. Guess I'll
> resort
> >> to diving into RichText code and see what I can find.
> >>
> >> Thanks again.
> >>
> >> Erik
> >>
> >>> On Apr 17, 2017, at 3:28 PM, Clint M <[hidden email]> wrote:
> >>>
> >>> maybe this?
> >>> http://stackoverflow.com/questions/37192684/stagetext-
> >> and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/
> >> questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
> >>> txt2.text = decodeURI(txt1.text);
> >>>
> >>> On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]
> >> <mailto:[hidden email]>> wrote:
> >>> Hey all:
> >>>
> >>> Do you have any idea how I can display this Unicode character U+1F601 <
> >> https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these UTF-8
> >> Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
> >>>
> >>> Thanks!
> >>>
> >>> Erik
> >>>
> >>> For additional background on my problem, read on...
> >>>
> >>> I'm implementing a mobile social media feed display using TLF (spark
> >> RichText) to display inline emoji. The user enters a short message into
> a
> >> TextInput control on the phone, and using the soft keyboard selects
> emoji
> >> keyboard, selects an emoji to display with the text and posts their
> update.
> >>>
> >>> Getting the text from the user works fine and the emoji is represented
> >> as UTF or Unicode value though I don't know how to verify.
> >>>
> >>> The TextInput control on the device shows the emoji rendering perfectly
> >> (spark TextInput):
> >>>
> >>>
> >>>
> >>> The value in the IntelliJ debugger's Variables view also renders the
> >> Unicode or UTF bytes correctly:
> >>>
> >>>
> >>>
> >>> But when I attempt to set the contents of the RichText control with the
> >> contents of the input field, the emoji is lost:
> >>>
> >>>
> >>>
> >>> I have tried many approaches, some are:
> >>> var value:String = textInput.text; // this contains the emoji:
> >>> richEditControl.text = value;
> >>>
> >>> richEditControl.textFlow = TextFlowUtil.importFromString(value);
> >>>
> >>> richEditControl.textFlow = TextConverter.importToFlow(value,
> >> TextConverter.TEXT_FIELD_HTML_FORMAT);
> >>>
> >>> richEditControl.textFlow = TextConverter.importToFlow(value,
> >> TextConverter.PLAIN_TEXT_FORMAT);
> >>> They each fail to display the emoji. I can display complex content in
> >> the same control no problem and I'm pretty familiar with TLF:
> >>>
> >>>
> >>>
> >>> I want to deal with HTML markup and TextConverter rather than composing
> >> the TLF in code, but if I have to go that route, I'm willing to if it
> works.
> >>>
> >>> But getting the RichText control's TextFlow to display a UNICODE
> >> character is a mystery to me and googling for answers has not been
> fruitful.
> >>>
> >>> I understand there is some question of whether Android phones will
> >> display the equivalent emoji as on iPhone, I get that. But looking at
> this
> >> chart, it should be possible for the most part:
> >>>
> >>> https://apps.timwhitlock.info/emoji/tables/unicode <
> >> https://apps.timwhitlock.info/emoji/tables/unicode>
> >>>
> >>> My problem should be a simple as just learning how to display this
> >> Unicode character U+1F601 <https://apps.timwhitlock.
> >> info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81
> >> using TLF. Is it possible? Thanks! Erik
> >>>
> >>>
> >>>
> >>
> >>
>
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

OmPrakash Muppirala
In fact, there are several suggestions for free emoji fonts here:
https://graphicdesign.stackexchange.com/questions/31625/are-there-any-free-emoji-fonts


Thanks,
Om

On Mon, Apr 17, 2017 at 4:26 PM, OmPrakash Muppirala <[hidden email]>
wrote:

> Hmm, it would be hard to map an emoji char to fontawesome char.  I just
> showed fontawesome as an example for usage.
>
> For your case, maybe the free OpenSansEmoji font from here can help:
> https://github.com/MorbZ/OpenSansEmoji
>
> Then try creating a simple <s:Label>{your unicode string here}</s:Label>
> and see if it works.
>
> Thanks,
> Om
>
> On Mon, Apr 17, 2017 at 3:58 PM, Erik J. Thomas <[hidden email]> wrote:
>
>> Hey Om:
>>
>> Good suggestion, I use fontAwesome and love it.
>>
>> How do you map the Unicode emoji char that is entered by the iOS
>> softkeyboard to an equivalent fontAwesome character? That would be super
>> helpful!
>>
>> My only other concern there is embedding multiple fonts in the TLF code.
>> I have tried mixing fonts with styles in HTML and using TextConverter to
>> import that mark up and that doesn't work for some reason, though I think
>> it's supposed to. I will work on that approach.
>>
>> Thanks!
>>
>> Erik
>>
>> > On Apr 17, 2017, at 3:45 PM, OmPrakash Muppirala <[hidden email]>
>> wrote:
>> >
>> > We have FontAwesome working fine with the Flex SDK.
>> >
>> > Here is a usage example:
>> > https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d6
>> 08e6abc914409a1a4ae2/frameworks/projects/flatspark/
>> src/flatspark/skins/ComboBoxButtonSkin.mxml#L106
>> > Here is the unicode definition:
>> > https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d6
>> 08e6abc914409a1a4ae2/frameworks/projects/flatspark/src/flatspark/utils/
>> AwesomeUtils.as#L131
>> >
>> > Of course, this is from a custom loaded font.
>> >
>> > Perhaps this could give you a hint on how you can achieve yours?
>> >
>> > Thanks,
>> > Om
>> >
>> >
>> >
>> > On Mon, Apr 17, 2017 at 3:42 PM, Erik J. Thomas <[hidden email]>
>> wrote:
>> >
>> >> Thanks Clint for your suggestion but this approach doesn't work either.
>> >> Tried using every way I know how to assign the content to the RichText
>> >> control. It could still be my error on how I'm assigning content to
>> the TLF
>> >> document.
>> >>
>> >> There must be some way to make this work since on can supposedly
>> display
>> >> Kanji characters in this way if the app is localized. The internals
>> must be
>> >> there for displaying multi-byte and/or unicode somewhere. Guess I'll
>> resort
>> >> to diving into RichText code and see what I can find.
>> >>
>> >> Thanks again.
>> >>
>> >> Erik
>> >>
>> >>> On Apr 17, 2017, at 3:28 PM, Clint M <[hidden email]> wrote:
>> >>>
>> >>> maybe this?
>> >>> http://stackoverflow.com/questions/37192684/stagetext-
>> >> and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/
>> >> questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
>> >>> txt2.text = decodeURI(txt1.text);
>> >>>
>> >>> On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]
>> >> <mailto:[hidden email]>> wrote:
>> >>> Hey all:
>> >>>
>> >>> Do you have any idea how I can display this Unicode character U+1F601
>> <
>> >> https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these
>> UTF-8
>> >> Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
>> >>>
>> >>> Thanks!
>> >>>
>> >>> Erik
>> >>>
>> >>> For additional background on my problem, read on...
>> >>>
>> >>> I'm implementing a mobile social media feed display using TLF (spark
>> >> RichText) to display inline emoji. The user enters a short message
>> into a
>> >> TextInput control on the phone, and using the soft keyboard selects
>> emoji
>> >> keyboard, selects an emoji to display with the text and posts their
>> update.
>> >>>
>> >>> Getting the text from the user works fine and the emoji is represented
>> >> as UTF or Unicode value though I don't know how to verify.
>> >>>
>> >>> The TextInput control on the device shows the emoji rendering
>> perfectly
>> >> (spark TextInput):
>> >>>
>> >>>
>> >>>
>> >>> The value in the IntelliJ debugger's Variables view also renders the
>> >> Unicode or UTF bytes correctly:
>> >>>
>> >>>
>> >>>
>> >>> But when I attempt to set the contents of the RichText control with
>> the
>> >> contents of the input field, the emoji is lost:
>> >>>
>> >>>
>> >>>
>> >>> I have tried many approaches, some are:
>> >>> var value:String = textInput.text; // this contains the emoji:
>> >>> richEditControl.text = value;
>> >>>
>> >>> richEditControl.textFlow = TextFlowUtil.importFromString(value);
>> >>>
>> >>> richEditControl.textFlow = TextConverter.importToFlow(value,
>> >> TextConverter.TEXT_FIELD_HTML_FORMAT);
>> >>>
>> >>> richEditControl.textFlow = TextConverter.importToFlow(value,
>> >> TextConverter.PLAIN_TEXT_FORMAT);
>> >>> They each fail to display the emoji. I can display complex content in
>> >> the same control no problem and I'm pretty familiar with TLF:
>> >>>
>> >>>
>> >>>
>> >>> I want to deal with HTML markup and TextConverter rather than
>> composing
>> >> the TLF in code, but if I have to go that route, I'm willing to if it
>> works.
>> >>>
>> >>> But getting the RichText control's TextFlow to display a UNICODE
>> >> character is a mystery to me and googling for answers has not been
>> fruitful.
>> >>>
>> >>> I understand there is some question of whether Android phones will
>> >> display the equivalent emoji as on iPhone, I get that. But looking at
>> this
>> >> chart, it should be possible for the most part:
>> >>>
>> >>> https://apps.timwhitlock.info/emoji/tables/unicode <
>> >> https://apps.timwhitlock.info/emoji/tables/unicode>
>> >>>
>> >>> My problem should be a simple as just learning how to display this
>> >> Unicode character U+1F601 <https://apps.timwhitlock.
>> >> info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81
>> >> using TLF. Is it possible? Thanks! Erik
>> >>>
>> >>>
>> >>>
>> >>
>> >>
>>
>>
>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: How to display a unicode char (emoji) in TLF (RichEdit control)

Erik J. Thomas
As usual, really good feedback. Thank you!

Erik

Sent from my iPhone

> On Apr 17, 2017, at 4:27 PM, OmPrakash Muppirala <[hidden email]> wrote:
>
> In fact, there are several suggestions for free emoji fonts here:
> https://graphicdesign.stackexchange.com/questions/31625/are-there-any-free-emoji-fonts
>
>
> Thanks,
> Om
>
> On Mon, Apr 17, 2017 at 4:26 PM, OmPrakash Muppirala <[hidden email]>
> wrote:
>
>> Hmm, it would be hard to map an emoji char to fontawesome char.  I just
>> showed fontawesome as an example for usage.
>>
>> For your case, maybe the free OpenSansEmoji font from here can help:
>> https://github.com/MorbZ/OpenSansEmoji
>>
>> Then try creating a simple <s:Label>{your unicode string here}</s:Label>
>> and see if it works.
>>
>> Thanks,
>> Om
>>
>>> On Mon, Apr 17, 2017 at 3:58 PM, Erik J. Thomas <[hidden email]> wrote:
>>>
>>> Hey Om:
>>>
>>> Good suggestion, I use fontAwesome and love it.
>>>
>>> How do you map the Unicode emoji char that is entered by the iOS
>>> softkeyboard to an equivalent fontAwesome character? That would be super
>>> helpful!
>>>
>>> My only other concern there is embedding multiple fonts in the TLF code.
>>> I have tried mixing fonts with styles in HTML and using TextConverter to
>>> import that mark up and that doesn't work for some reason, though I think
>>> it's supposed to. I will work on that approach.
>>>
>>> Thanks!
>>>
>>> Erik
>>>
>>>> On Apr 17, 2017, at 3:45 PM, OmPrakash Muppirala <[hidden email]>
>>> wrote:
>>>>
>>>> We have FontAwesome working fine with the Flex SDK.
>>>>
>>>> Here is a usage example:
>>>> https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d6
>>> 08e6abc914409a1a4ae2/frameworks/projects/flatspark/
>>> src/flatspark/skins/ComboBoxButtonSkin.mxml#L106
>>>> Here is the unicode definition:
>>>> https://github.com/apache/flex-sdk/blob/8f3dd5bb05549b29f9d6
>>> 08e6abc914409a1a4ae2/frameworks/projects/flatspark/src/flatspark/utils/
>>> AwesomeUtils.as#L131
>>>>
>>>> Of course, this is from a custom loaded font.
>>>>
>>>> Perhaps this could give you a hint on how you can achieve yours?
>>>>
>>>> Thanks,
>>>> Om
>>>>
>>>>
>>>>
>>>> On Mon, Apr 17, 2017 at 3:42 PM, Erik J. Thomas <[hidden email]>
>>> wrote:
>>>>
>>>>> Thanks Clint for your suggestion but this approach doesn't work either.
>>>>> Tried using every way I know how to assign the content to the RichText
>>>>> control. It could still be my error on how I'm assigning content to
>>> the TLF
>>>>> document.
>>>>>
>>>>> There must be some way to make this work since on can supposedly
>>> display
>>>>> Kanji characters in this way if the app is localized. The internals
>>> must be
>>>>> there for displaying multi-byte and/or unicode somewhere. Guess I'll
>>> resort
>>>>> to diving into RichText code and see what I can find.
>>>>>
>>>>> Thanks again.
>>>>>
>>>>> Erik
>>>>>
>>>>>> On Apr 17, 2017, at 3:28 PM, Clint M <[hidden email]> wrote:
>>>>>>
>>>>>> maybe this?
>>>>>> http://stackoverflow.com/questions/37192684/stagetext-
>>>>> and-emoji-on-android-air-mobile-as3 <http://stackoverflow.com/
>>>>> questions/37192684/stagetext-and-emoji-on-android-air-mobile-as3>
>>>>>> txt2.text = decodeURI(txt1.text);
>>>>>>
>>>>>> On Mon, Apr 17, 2017 at 3:22 PM, Erik J. Thomas <[hidden email]
>>>>> <mailto:[hidden email]>> wrote:
>>>>>> Hey all:
>>>>>>
>>>>>> Do you have any idea how I can display this Unicode character U+1F601
>>> <
>>>>> https://apps.timwhitlock.info/unicode/inspect/hex/1F601> or these
>>> UTF-8
>>>>> Bytes \xF0\x9F\x98\x81 using TLF (in RichEdit control)?
>>>>>>
>>>>>> Thanks!
>>>>>>
>>>>>> Erik
>>>>>>
>>>>>> For additional background on my problem, read on...
>>>>>>
>>>>>> I'm implementing a mobile social media feed display using TLF (spark
>>>>> RichText) to display inline emoji. The user enters a short message
>>> into a
>>>>> TextInput control on the phone, and using the soft keyboard selects
>>> emoji
>>>>> keyboard, selects an emoji to display with the text and posts their
>>> update.
>>>>>>
>>>>>> Getting the text from the user works fine and the emoji is represented
>>>>> as UTF or Unicode value though I don't know how to verify.
>>>>>>
>>>>>> The TextInput control on the device shows the emoji rendering
>>> perfectly
>>>>> (spark TextInput):
>>>>>>
>>>>>>
>>>>>>
>>>>>> The value in the IntelliJ debugger's Variables view also renders the
>>>>> Unicode or UTF bytes correctly:
>>>>>>
>>>>>>
>>>>>>
>>>>>> But when I attempt to set the contents of the RichText control with
>>> the
>>>>> contents of the input field, the emoji is lost:
>>>>>>
>>>>>>
>>>>>>
>>>>>> I have tried many approaches, some are:
>>>>>> var value:String = textInput.text; // this contains the emoji:
>>>>>> richEditControl.text = value;
>>>>>>
>>>>>> richEditControl.textFlow = TextFlowUtil.importFromString(value);
>>>>>>
>>>>>> richEditControl.textFlow = TextConverter.importToFlow(value,
>>>>> TextConverter.TEXT_FIELD_HTML_FORMAT);
>>>>>>
>>>>>> richEditControl.textFlow = TextConverter.importToFlow(value,
>>>>> TextConverter.PLAIN_TEXT_FORMAT);
>>>>>> They each fail to display the emoji. I can display complex content in
>>>>> the same control no problem and I'm pretty familiar with TLF:
>>>>>>
>>>>>>
>>>>>>
>>>>>> I want to deal with HTML markup and TextConverter rather than
>>> composing
>>>>> the TLF in code, but if I have to go that route, I'm willing to if it
>>> works.
>>>>>>
>>>>>> But getting the RichText control's TextFlow to display a UNICODE
>>>>> character is a mystery to me and googling for answers has not been
>>> fruitful.
>>>>>>
>>>>>> I understand there is some question of whether Android phones will
>>>>> display the equivalent emoji as on iPhone, I get that. But looking at
>>> this
>>>>> chart, it should be possible for the most part:
>>>>>>
>>>>>> https://apps.timwhitlock.info/emoji/tables/unicode <
>>>>> https://apps.timwhitlock.info/emoji/tables/unicode>
>>>>>>
>>>>>> My problem should be a simple as just learning how to display this
>>>>> Unicode character U+1F601 <https://apps.timwhitlock.
>>>>> info/unicode/inspect/hex/1F601> or these UTF-8 Bytes \xF0\x9F\x98\x81
>>>>> using TLF. Is it possible? Thanks! Erik
>>>>>>
>>>>>>
>>>>>>
>>>>>
>>>>>
>>>
>>>
>>

Loading...