The space that is followed by CJK should not be a breaking space in TextMetrics

Expected Behavior

The space that is followed by Chinese/Japanese/Korean should not be a breaking space. Like how it works in DOM as well:

Current Behavior

The space will be a breaking space no matter what the following character is. The breaking space works correctly in English, but it is not correct with Chinese/Japanese/Korean.

Possible Solution

TextMetrics.isBreakingSpace may need to check the next character as well. If the character is CJK, the space should not be a breaking space.

let isUnbreakSpace = false;

if (typeof nextChar === 'string')
{
    const matchedAsCJK = nextChar.match(/[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f]/g);

    isUnbreakSpace = !!matchedAsCJK;
}

return (TextMetrics._breakingSpaces.indexOf(char.charCodeAt(0)) >= 0) && !isUnbreakSpace;

Steps to Reproduce

const style = new PIXI.TextStyle({
    breakWords: true,
    fontSize: 13,
    fontWeight: "bold",
    lineJoin: "bevel",
    stroke: "#896161",
    whiteSpace: "pre-line",
    wordWrap: true,
    wordWrapWidth: 285
});
const text = new PIXI.Text('テストテキスト テストテキスト テストテキスト テストテキスト ', style);

Environment

• pixi.js version: _e.g. 5.1.6
• Browser & Version: _e.g. Chrome 86
• OS & Version: _e.g. Mac OS 10.15

[huang-yuwei]

@themoonrat Hi, I have just created a plugin for the CJK issue (sorry for my late notice), and would like to invite you to try on your games. I have tried it on my project, and seems great, but I hope it can work on almost all the cases in CJK. Therefore, sincerely hope you can try it when you have got time ☺️

BTW, I think my new way to determine the breakable-space/char uses less calculation and works in CJK than the current method. Do you think it is a good idea to contribute that feature to PIXI directly?

https://github.com/huang-yuwei/pixi-cjk

[themoonrat]

CJK isn’t supported out of the box, atm, and there are a number of issues with it. I was going to make a plugin a long time ago to add support, and some refactor work for Text and TextMetrics allowed the easy addition, but it just never got done, as I suck. Not sure if it’d be something natively included in PixiJS itself, as its requires knowing what to do with certain symbols, for certain languages, via regex. I need to take another look. I have a method in my bespoke version of PixiJS, but there I just outright know what language hte game is in, so don’t have to be as smart about things