Need feature : SplitText works with img

[CliCliC]

Hi,

 

in a recent project i need to animate tweets text. SplitText is wonderfull for that but in tweets there are emojis... 

 

To display emojis i am using twemoji wich replace emoji characters by <img> tags in the text.

 

Do you have any other idea to make it work ?

 

Or could you envisage to add support of img tags in SplitText ?

[Carl]

Hi and welcome to the GreenSock forums,

 

SplitText wasn't designed for text that has images (or any other html tags in it). I can see with emoji becoming more popular and supported it could be useful.

At the moment there are a lot of other features we are working on across the platform so I'm can't commit to any timeframe on when we may add something like this. We will certainly keep this in mind though. I think this is the second time I've seen this issue come up. 

 

Unfortunately, I'm really not aware of a solid workaround at the moment. 

[OSUblake]

You might want to check out this thread. I think he was able to get all the emojis working with splitText except for the ones that had skin colors.

http://greensock.com/forums/topic/13427-emoticons-in-splittext/

[CliCliC]

Ok guys, thanks for answering.

 

@OSUblake : i can't make it work.

 

@Carl : Could you just split text respecting surrogate pairs like this : https://github.com/essdot/spliddit ?

I think it's quicker than redisegning SplitText to work with img tags and it still permit to display emojis with compatible fonts

[OSUblake]

Just tried it using lodash...

See the Pen WwxJpV by osublake (@osublake) on CodePen

[Jonathan]

Technically the emoji's are just text or a html unicode entity symbols that are rendered as text nodes using the CharacterData DOM Interface. Whereas an image tag is a bitmap that uses the HTMLImageElement DOM interface. So I dont see how an <img> tag could be split, when its not text, like Carl advised above.    Just my two cents

[CliCliC]

@OSUBlake : i tried but loadash is not working with emojis, it split text in the same fashion as splitText (resulting in �). And even if it was splitting text without blowing up surrogates pairs I don't see the point of using it outside splittext...

 

@Jonathan : I know the difference between an <img> and a character... emojis can be both. And in both case splittext is failing :

 

First case : emoji is displayed as characters in a string, some emoji are encoded with 2 or 4 UTF8 characters and splitText doesn't care about that. so it split one emoji in 2 or 4 unknow characters : �

 

Second case : emoji is displayed as an <img> in the middle of an html string because in the first case emoji are not pretty : splitText doesn't work with <img> those tags are stripped.

 

Any way, it took me thirty minutes to modify SplitText.js to solve the first case and it's working perfectly now. I would have liked to share it but it's not open source so...

 

For the second case : why splitText cannot put <img> tags (or any kind of html tag by the way) into div like it do with characters?

[OSUblake]

What do you mean it doesn't work in lodash? Did you not see my

See the Pen WwxJpV?editors=0010 by osublake (@osublake) on CodePen

?

 

 

Calling _.toArray(someString) is the only method you need to use. And all the lodash methods are available as seperate modules, so you don't have to use the entire library.

https://www.npmjs.com/browse/keyword/lodash-modularized

 

If you're interested, you can check out the regex stuff they use on lines 164-221. It's pretty solid.

https://github.com/lodash/lodash/blob/bf06df447584a0dd4bd55a2a0cf05f88e6e7ed8c/lodash.js#L164-L221

 

[CliCliC]

Yes i tried but it was not working. Maybe i was not using the good version of lodash. But then what ? I don't see how it can help with splittext ?

 

I told you I modified splitText to take care about emojis and now it's working do you wan't the code ?

[OSUblake]

You were probably just using an older version. The emoji stuff will only work in version 4.x, which hasn't been out that long. 

 

I really couldn't show how to use it inside the plugin on CodePen because it's a members only thing. But you would use it inside the plugin's _split method to compose any emojis before they get wrapped in a div. There's also a couple of other methods like _.words() and _.escape() you could use to simplify some other stuff in there.

 

But none of that really matters now that you got it working.

 

That would be great if you could send me the code. I'd like to see how you went about resolving this. It might also help out in the future as I'm pretty sure you're not going to be last person to bring this issue up.

[Jonathan]

It looks like even with Lodash, i only see full emoji's in Chrome with Lodash. But Firefox and IE11, are not showing them all, some display as an unidentified entity characters. But Lodash does show all the entities in Chrome (Windows 7)

[OSUblake]

That's a Windows 7 issue. I don't think you get full support for emojis, like color, until Windows 8.1. It also depends on the font the browser is using. For Windows 7, I think you need to update the Segoe UI symbol font.

 

I haven't seen any issues with Edge, IE11, or Firefox on Win10 for displaying emojis. Here's a screenshot where I was entering emojis in Firefox.

 

 

 

 

 

 

PROTIP: Mac users can open up the emoji panel by pressing Command-Control-Space inside a text field. Win10 Users can open it up by clicking the Touch Keyboard icon in the taskbar. Win8 users can open it up by right-clicking the taskbar > Toolbars > Touch Keyboard.

 

 

[Jonathan]

That weird if its a Windows 7 issue.. since it works in Chrome on Windows 7, but all other browsers like Firefox and IE11 it does not display. And i have the latest Segoe Fonts installed. Any other font updtaes and MicroSoft wants like $55 to update each Segoe Fonts. Im still waiting on some programs to be compatible with Windows 10. But like any new Microsoft product, i will wait until all the bugs are squashed, which should be never

[OSUblake]

I think there's some legal issue surrounding the Segoe font where MS doesn't actually own it, so they have to charge for it. But maybe this update will fix it.

https://support.microsoft.com/en-us/kb/2729094

 

If that doesn't work see if you can copy and paste these.

http://getemoji.com

 

As for Chrome... who knows. It's an operating system disguised as a browser that is slowly taking over your computer and does what it wants. What I found strange is that a couple emojis don't display correctly in Opera. I would expect it to look just like Chrome. After all, isn't Opera really just a European version of Chrome?

[Jonathan]

Nice, I was just running that MS support update link, but Windows 7 told me i already have that update, which is weird.

 

What is also weird, like you said about Opera.. It should be since it is was using a port of blink (googles version of webkit), but now say they are just gonna follow and commit to Chromium.

 

But thanks for the link to getemoji.com Blake, i will take a look at that