Jump to content
Search Community

Emoticons in SplitText

pixel-fiend test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm trying to use SplitText with some text that contains emoticons. However, splitting an emoticon with an empty string will yield two garbage characters

 

" :???:".split("")

 

["�", "�"]

 

Here's an article that mentions the problem: 

https://mathiasbynens.be/notes/javascript-unicode

 

I can hack a workaround, but is there any chance this will be supported in the future?

Link to comment
Share on other sites

Just saw the answer by Blender on SO, which seems to be working fine for everything but IE/Edge. Not sure why, but those empty characters show up on the string itself.

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

 

t6Xcu11.png

 

Which is weird, because they show up in Twitter just fine. I even copied it directly from the tweet.

 

xUN61I9.png

 

Have you taken a look at IE/Edge yet?

Link to comment
Share on other sites

For now, I'm only concerned with it working in Chrome. My lazy solution was to simply remove the skin-tone blocks from the string.

 

The skin-tone characters are definitely there, and have a purpose. They just fail to render correctly in some cases. I've seen it fail on twitter, but not every time. 

Link to comment
Share on other sites

Gotcha. I was just bringing that up because I noticed the original CodePen that was linked to in the comments was modified and seems to be working in Chrome.

function append(html) {
  var div = document.createElement('div');
  div.innerHTML = html;
  document.body.appendChild(div);
}

var string = ""; // Won't display in forum

append(string);
append(spliddit(string).map(function(c) {
  return c;
}).join(''));

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

Link to comment
Share on other sites

  • 4 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...