SplitText problem with Chinese characters

[AP IDW]

I have a problem with how SplitText handles line breaks with Chinese characters. Please see the example below of how this same text looks with and without SplitText implementation. I suspect that is because of ， and  、 characters. They are not treated as line-breakable so something like this is treated as whole word 11.59系列发布五年以来，不断推陈出新，采用极具现代

See the Pen KwPVWXQ by marcin_tapptic_1 (@marcin_tapptic_1) on CodePen.

[Cassie]

Hi there!

 

I don't understand where the characters should split, but we have custom delimiters so you could do something like this?

See the Pen KwPVWXQ by marcin_tapptic_1 (@marcin_tapptic_1) on CodePen.

Alternately could you explain in a little more detail where you would expect chinese characters to split into words. If you give us a clear spec we can potentially create a solution in the future.

[AP IDW]

Hi, I don't think you clicked save, because you sent exactly this same codepen that I have  

[AP IDW]

Characters should split the same way as they split native in the browser. Please compare this codepen with my previous one. After removing the implementation of SplitText paragraph takes less space by at least 1-2 lines. 

See the Pen GgKoEYV by marcin_tapptic_1 (@marcin_tapptic_1) on CodePen.

 

[Cassie]

Ah, I think you just want to split by characters only? Not by words and characters?

See the Pen xbKZrgP?editors=0010 by GreenSock (@GreenSock) on CodePen.

[AP IDW]

Thanks for delving into the topic. Yes, splitting by characters works better.  But it is not what I'm trying to achieve. I try to split text line by line in Chinese. But it doesn't seem to work check my code pen example. After splitting there are just 2 lines.

See the Pen qEWbXxe by marcin_tapptic_1 (@marcin_tapptic_1) on CodePen.

 

[AP IDW]

I would like to achieve lines split like this 

[Cassie]

Sure, because SplitText splits up words and lines using the space character " " and you only have one of those in between code and 11.59

Code 11.59

So as far as SplitText is concerned, you have two words, which it can't split up any smaller. If you want to split by line (and divide words up between lines) you'll need to specify where you want your code to divide, you can do that with custom delimiters.

See the Pen pbWwLe by GreenSock (@GreenSock) on CodePen.

[AP IDW]

Hello, I managed to adjust my behaviour as  I need for this specific case.  I'm just worried because there could be a lot of Chinese characters to cover all the cases  😕 

See the Pen qEWbXxe by marcin_tapptic_1 (@marcin_tapptic_1) on CodePen.

[Cassie]

I'm afraid I can't really advise any more than splitting by chars and using delimiters as I don't understand the language and SplitText wasn't designed with it in mind.

Sorry I can't help more here!

[Rodrigo]

Hi,

 

We've seen this on oriental languages (saw it with Japanese and now Chinese), the issue here is that there are no spaces between words so SplitText interprets all those words as a single line. On top of that the elements you're passing as word delimiter are not actually working, so I made a fork of your demo with a regular comma (IDK if there is an actual difference between an occidental and Chinese comma though):

See the Pen pvzbEOW by GreenSock (@GreenSock) on CodePen.

 

But of course this brings up the issue of the text rendering in a different way because those elements end up creating a different way the text is initially rendered which is what GSAP takes in order to position the elements after the SplitText instance is created.

 

Again I wish there was something we could do about it, but these languages work in a different way when it comes to rendering I'm afraid 😞