# textWrapping not working on Asian languages (Japanese & Chinese)

**URL:** <https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902>\
**Category:** Bugs\
**Tags:** gui\
**Created:** [May 17, 2020, 2:35am UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902 "2020-05-17T02:35:01Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aaran](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aaran/32/8497_2.png) [@Aaran](https://forum.babylonjs.com/u/Aaran)\
**Post date:** [May 17, 2020, 2:35am UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/1 "2020-05-17T02:35:01Z")

</div>

GUI TextBlock textWrapping is not working on Asian languages. I’ve tried Japanese and Chinese.

The PG I saved is all ? marks.  
[https://www.babylonjs-playground.com/#XCPP9Y#2555](https://www.babylonjs-playground.com/#XCPP9Y#2555)

But you can simply copy+paste the text below and replace line 33.  
var text = “\<copy+paste here\>”

Japanese text:  
バビロンは、紀元前18～6世紀の古代メソポタミア地域における主要な王国だった。その名をとどろかせる首都が、ユーフラテス川沿いに建設された。都市は、川をまたいでその両岸に、ほぼ同じ面積で建設され、時に襲う季節的な洪水を防ぐため、川沿いには険しい堤防が築かれた。元々は、バビロンはアッカドの小さな町で、その起源は紀元前2300年頃のアッカド帝国にまでさかのぼる。

Chinese text:  
巴比伦城市遗址在今天伊拉克巴比伦省的希拉被发现，位于巴格达以南约八十五公里处。这个举世闻名城市的遗址地处底格里斯河和幼发拉底河之间肥沃的美索不达米亚平原上，现在仅留存着由破损的土砖建筑物构成的大型土墩和碎片。城市沿着幼发拉底河建造，被左、右河岸平分成两部分，配有陡峭的河堤来抵御季节性的洪水。

Thanks.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 18, 2020, 1:58pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/2 "2020-05-18T13:58:39Z")

</div>

Pinging @thomlucc to track this issue

---

<div class="post-metadata">

**Author:** ![thomlucc](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/thomlucc/32/4046_2.png) [@thomlucc](https://forum.babylonjs.com/u/thomlucc)\
**Post date:** [May 18, 2020, 5:07pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/3 "2020-05-18T17:07:10Z")

</div>

@Aaran - I create an issue on Babylon.js repo. You can track: [#8211](https://github.com/babylonjs/babylon.js/issues/8211)

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 18, 2020, 9:35pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/4 "2020-05-18T21:35:24Z")

</div>

The problem is that the separator character is assumed to be the space character, and there is no space in those strings…

There are specific rules to split japanese words: [Line breaking rules in East Asian languages - Wikipedia](https://en.wikipedia.org/wiki/Line_breaking_rules_in_East_Asian_languages#Line_breaking_rules_in_Japanese_text_(Kinsoku_Shori))

Do we want to implement this in the Babylon GUI?

If yes I guess we would need to support other asian languages as well…

Also, how to detect the language from a string? Must be possible but not easy, I guess we would need the user to pass the information.

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 18, 2020, 9:37pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/5 "2020-05-18T21:37:42Z")

</div>

Maybe this can be used to split words for japanese: [GitHub - trkbt10/mikan.js: 機械学習を用いていない日本語改行問題へのソリューション](https://github.com/trkbt10/mikan.js)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 18, 2020, 11:13pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/6 "2020-05-18T23:13:17Z")

</div>

What about giving the user an option to provide his own separation mechanism. And we can create a PG for the doc that does it for chinese / japanese ?

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 18, 2020, 11:24pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/7 "2020-05-18T23:24:56Z")

</div>

Ok, will do that.

---

<div class="post-metadata">

**Author:** ![Aaran](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/aaran/32/8497_2.png) [@Aaran](https://forum.babylonjs.com/u/Aaran)\
**Post date:** [May 19, 2020, 1:29pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/8 "2020-05-19T13:29:19Z")

</div>

Thanks @thomlucc and all for your help!

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 19, 2020, 6:19pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/9 "2020-05-19T18:19:51Z")

</div>

Done, but I’m a bit stuck for an example PG because of:

> <https://github.com/BabylonJS/Babylon.js/issues/8221>
>
> Create a PG with only:
> var joshi = "でなければ|";
> Then save the PG (I have done this in: https://playground.babylonjs.com/#MEH9C5)
> You will get an error...

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 19, 2020, 6:28pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/10 "2020-05-19T18:28:26Z")

</div>

yeah the server may not store unicode characters…

This is the response I’m getting  
{“id”:“MEH9C5”,“version”:0,“snippetIdentifier”:“MEH9C5-0”,“jsonPayload”:"{“code”:“var joshi = \”???|\";\r\n"}",“name”:“Test japanese”,“description”:"",“tags”:""}

Investigating the root cause

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 19, 2020, 7:16pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/11 "2020-05-19T19:16:26Z")

</div>

Ok I cannot fix it. The playground backend is configured to use text and not ntext and I cannot change it easily as the field is used by the fully et search system

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 20, 2020, 7:32pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/12 "2020-05-20T19:32:18Z")

</div>

A `TextBlock.wordSplittingFunction` property has been added, that lets you provide a function that should return an array of words given a string line.

Here’s a fiddle that demonstrates the usage for japanese (could not find an easy to use js package for chinese as Milkan is for japanese):

[https://jsfiddle.net/3ph9m0cx/](https://jsfiddle.net/3ph9m0cx/)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [May 20, 2020, 9:00pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/13 "2020-05-20T21:00:11Z")

</div>

do you mind updating the doc as well as this is super useful?  
Thanks a ton

---

<div class="post-metadata">

**Author:** ![Evgeni\_Popov](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/evgeni_popov/32/4432_2.png) [@Evgeni\_Popov](https://forum.babylonjs.com/u/Evgeni_Popov)\
**Post date:** [May 21, 2020, 11:43am UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/14 "2020-05-21T11:43:14Z")

</div>

Done:

> <https://github.com/BabylonJS/Documentation/pull/1956>

---

<div class="post-metadata">

**Author:** ![thomlucc](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/thomlucc/32/4046_2.png) [@thomlucc](https://forum.babylonjs.com/u/thomlucc)\
**Post date:** [May 22, 2020, 4:45pm UTC](https://forum.babylonjs.com/t/textwrapping-not-working-on-asian-languages-japanese-chinese/10902/15 "2020-05-22T16:45:10Z")

</div>

Thanks @Evgeni_Popov!! @Aaran
