Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
multivac

Splittext and Denavagari

Recommended Posts

Hello GSAP !

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

Thank you

See the Pen rdPbeo by multivac (@multivac) on CodePen

Link to comment
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
Link to comment
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

Link to comment
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!

Link to comment
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
Link to comment
Share on other sites

This problem only happens when GS is applied.  

Link to comment
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>: 

See the Pen 595c1d252b8ca3cfe8d94148a64a3740 by GreenSock (@GreenSock) on CodePen

 

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
Link to comment
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?

 

 

Link to comment
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
Link to comment
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
Link to comment
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.

Link to comment
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

Link to comment
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.

Link to comment
Share on other sites

Maybe if the text were converted to svg then animated?

Link to comment
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.

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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. 

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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.
×