multivac

Splittext and Denavagari

Recommended Posts

Hello GSAP !

When splitting Denavagari characters, some weird circle elements are added. Any suggestions ?

Thank you

Share this post


Link to post
Share on other sites

I think that has to do with the character set and the font-family and nothing to do with GSAP. I just see that in the DOM and it's selectable only as one, joined character.

 

5acce6bde02fd_ScreenShot2018-04-10at12_29_57PM.png.347ca7b4a3fa2824be196bd96de73a23.png

  • Like 3

Share this post


Link to post
Share on other sites

It happens with every fonts I've tested. Google fonts included. Codepen was updated with google font.

Any hints or suggestions are welcomed !

Thanks

Share this post


Link to post
Share on other sites

It might be helpfull if we could see the original text before it's been split apart as well. Seeing what the original looks like might help us provide a strategy for solving it. 

 

EDIT: Nevermind I see it's in the html section of the pen. I was looking at in browser tools DOH!

Share this post


Link to post
Share on other sites

I had a look at it duplicating the original text side by side with split text, not only did it introduce those circle characters but it changed the letterforms of some others. I'm guessing the letterforms of this language may change based on ligature sets built into the font combined with browser rendering problem.

 

Instead of using split text maybe you could animate letterspacing on the raw text item though that wouldn't help with the other effects you're after.

  • Like 1

Share this post


Link to post
Share on other sites

This problem only happens when GS is applied.  

Share this post


Link to post
Share on other sites

Check this out - I removed SplitText completely and merely iterated through each character of the text and wrapped it manually in a <span>: 

 

So it seems like it's unrelated to SplitText. It must be that certain pairs of characters are merged somehow by the browser to form one character. See what I mean? 

  • Like 4

Share this post


Link to post
Share on other sites

I've run this at home on different browsers same result.  As I understand split text just wraps the word in a div.  If I just wrap these words in divs manually and animated them I wonder what would happen?

 

 

Share this post


Link to post
Share on other sites
12 minutes ago, GreenSock said:

So it seems like it's unrelated to SplitText. It must be that certain pairs of characters are merged somehow by the browser to form one character. See what I mean? 

 

Same as I observed, this language/font obviously has rules that create ligatures of character combinations, when split up they lose their context to one another and don't render properly.

  • Like 2

Share this post


Link to post
Share on other sites

While I understand that this isn't technically something that SplitText does, it does mean that in effect, SplitText doesn't support languages that rely on ligatures. Is that right? I get that it would be way too much work for the GSAP team to ensure full compatibility with all the possible variations of combined characters in all languages, but maybe something like an optional parameter that says "never split the following strings" would be useful here. That way you could pass (using this case as an example) ["पा", "क्ष", "यो", "द्यो", "का", "सा", "धा", "मी", "पा", "है"] and they would remain together in the final result. (Maybe that's still very wrong for someone who does read Denavagari, apologies if so, I'm just assuming based on the codepen.)

  • Like 4

Share this post


Link to post
Share on other sites
4 minutes ago, Acccent said:

but maybe something like an optional parameter that says "never split the following strings" would be useful here. That way you could pass (using this case as an example) ["पा", "क्ष", "यो", "द्यो", "का", "सा", "धा", "मी", "पा", "है"] and they would remain together in the final result.

 

That's a good idea assuming it's workable, and it would put the responsibility on the user to set it up, absolving GSAP of responsibility of specific implementation by language.

Share this post


Link to post
Share on other sites

Just did a quick test with the Arabic for "Thank you" (after seeing this tweet) and a similar thing happens:

 

 

  • Like 1

Share this post


Link to post
Share on other sites

I guessing you could still do word based animation but the complexity of that alphabet is probably too much for char animation to be practical, maybe that's the solution as well for the original request, reduce it to word animation instead of character animation.

 

Virtually all languages have ligatures but some have rules that are too complex to be used like latin characters.

 

In the Arabic alphabet, historically a cursive derived from the Nabataean alphabet, most letters' shapes depend on whether they are followed (word-initial), preceded (word-final) or both (medial) by other letters. For example, Arabic mīm, isolated م, tripled (mmm, rendering as initial, medial and final): ممم. Notable are the shapes taken by lām + ʼalif isolated: , and lām + ʾalif medial or final: . Unicode has a special Allah ligature at U+FDF2: .

 

https://en.wikipedia.org/wiki/Typographic_ligature

Share this post


Link to post
Share on other sites

I updated the above codepen with another possible solution, it's a bit hacky but it involves passing the characters to a separate div once their animation is complete. I believe this would guarantee complete support since you're just recreating a regular string, but I guess the implementation wouldn't be trivial. Maybe a clean-up and a mention in the docs would work.

Share this post


Link to post
Share on other sites

Maybe if the text were converted to svg then animated?

Share this post


Link to post
Share on other sites
18 minutes ago, jimeast said:

Maybe if the text were converted to svg then animated?

 

I thought about that it's certainly doable. Labour intensive if you had to do a lot of it but it's a solution if you absolutely have to do it.

Share this post


Link to post
Share on other sites

Okay, how about if I add a "specialChars" property that you can pass into SplitText and it'll check that array for special characters and keep them grouped properly? Here's a demo (you may need to clear your cache): 

 

 

That provides flexibility to get around odd scenarios like this. If everybody likes it, I can put it into the official downloads (the version in that codepen only works on codepen). 

 

So it'd look like:

new SplitText("#split", { type:"chars", specialChars:["पा", "क्ष", "यो", "द्यो", "का", "सा", "धा", "मी", "पा", "है"] });

 

Cool?

  • Like 4
  • Thanks 1

Share this post


Link to post
Share on other sites

I think that's fantastic, Jack :)

 

It still doesn't really work with languages like Arabic, where, well, the whole string is a "special char" in that it's all linked.. haha. But I guess, when considering the need to handle the rtl direction on top of this current issue, it would be a lot more work overall to provide satisfactory support. Maybe for a future release!

 

Regardless, this one addition is great already, thanks for adding it so quickly!

  • Like 2

Share this post


Link to post
Share on other sites
2 hours ago, GreenSock said:

That provides flexibility to get around odd scenarios like this. If everybody likes it, I can put it into the official downloads (the version in that codepen only works on codepen). 

 

Actually it's useful for more than grouping just a few special characters. You can use it to mix characters and words or any particular special string into a split text object to create new types of animation effects as well, without having to target words and characters with separate animations.

 

if possible you could also add the ability to select special characters by string slices then you'd have precise control over exactly what items are grouped into special characters.

 

 

 

  • Like 3

Share this post


Link to post
Share on other sites
16 hours ago, Visual-Q said:

if possible you could also add the ability to select special characters by string slices then you'd have precise control over exactly what items are grouped into special characters.

 

I didn't quite follow that - could you explain further, @Visual-Q? Are you suggesting a new/different feature than the specialChars one I illustrated above? 

 

@Acccent I'm not even sure how to approach the whole rtl thing and the way that those characters intermingle and group in various [odd to me] ways. I wonder if anyone would realistically WANT to split those up by characters. If you've got any specific suggestions/techniques, I'm all ears. 

Share this post


Link to post
Share on other sites
35 minutes ago, GreenSock said:

 

I didn't quite follow that - could you explain further, @Visual-Q? Are you suggesting a new/different feature than the specialChars one I illustrated above? 

 

Currently your special character finds character matches, I was thinking you could also define them as an array of slice positions from the original text string.

 

I.e. [[0,7],[12,17],[20,24]] sort of thing.

 

This would allow you to specify any portion(s) of the original text as a grouped object. 

 

 

 

  • Like 1

Share this post


Link to post
Share on other sites
44 minutes ago, GreenSock said:

I'm not even sure how to approach the whole rtl thing and the way that those characters intermingle and group in various [odd to me] ways. I wonder if anyone would realistically WANT to split those up by characters.

3

 

I was thinking that as well, chances are with a language like that you would not want animation by character anyway. Of course that's just a guess.

  • Like 1

Share this post


Link to post
Share on other sites
46 minutes ago, GreenSock said:

I'm not even sure how to approach the whole rtl thing and the way that those characters intermingle and group in various [odd to me] ways. I wonder if anyone would realistically WANT to split those up by characters. If you've got any specific suggestions/techniques, I'm all ears. 

 

I don't know either, to be honest! The only thing I can guess is what I did with the codepen above, where each character is pushed back to a separate string after the animation, to let the browser handle the joining. It is definitely a complex issue and one that someone who does speak Arabic would need to weigh in. I assume similar issues arise with other languages, like most of the ones used in Asia for instance. It is a bit of a can of worms :)

  • Like 1

Share this post


Link to post
Share on other sites
4 minutes ago, Visual-Q said:

I was thinking you could also define them as an array of slice positions from the original text string.

 

Oh, okay. Well, that seems pretty cumbersome BUT maybe this is the time to let you in on a little secret - I set it up so that you can define specialChars as a function. As it iterates through each character in the string, it feeds the REMAINING text to the function and then you return a number corresponding to how many characters should be grouped in that iteration. So technically you could apply whatever logic you want! 

 

So, for example, if the string is "ABCDE", the function would receive "ABCDE" as the parameter and if you returned 1 or 0 or null, then it'd take "A" as the character and the next time the function gets called, it'd receive "BCDE" and if you return 3, it would tell SplitText to group "BCD" as if it were a single character, so the next time the function gets called, it'd receive "E". Make sense? So again, my goal was to make it super flexible and let you run any logic rather than only being able to feed in an array (though that's probably the most common use case). 

 

I wasn't keen on necessarily exposing that option at first, just so I don't confuse people. But I like having it there for those edge cases and I can be like "oh, guess what - we've already got you covered...here's a secret feature..." :)

  • Like 4

Share this post


Link to post
Share on other sites

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.