fix(label): Charsets like Cyrillic should break work the same as Latin

[DmytroKondratiuk]

Version

5.3.0+

Link to Minimal Reproduction

https://jsfiddle.net/nfaq68L2/

Steps to Reproduce

legend: {
      type: 'scroll',
      orient: 'vertical',
      right: '10%',
      top: 'middle',
      data: chartData,
      textStyle: {
        width: 300,
        overflow: 'break',
        verticalAlign: 'middle',
      },

Current Behavior

When I use ukraine language "overflow: 'break'" for pie series legend breaks by character instead of by word. For example word "цвітуть" must be at new line but on new line character "ь". When I use english language words breaks correct.

Expected Behavior

overflow: 'break' for pie series legend should break by word.

Environment

- OS: Mac
- Browser: Chrome
- Framework: React

Any additional comments?

No response

[Ovilia]

Currently, the breaking logic is to check if the letter is latin. Maybe this is not accurate. Any idea to improve this?

[DmytroKondratiuk]

Hi
I had similar problem with tooltip. But for tooltip we can use css styles. I fixed this problem like this

    tooltip: {
          trigger: 'item',
          formatter: '{a}<p>{b} ({d}%)</p>',
          appendToBody: true,
          extraCssText: 'max-width: 300px; white-space: normal; overflow-wrap: normal;',
     },

If we could use css styles and formatter for legend like for tooltip it was great

Or we can check if charsets is Cyrillic. For Cyrillic charset codes is from 0x80 to 0xFF. So we can do like this:

  function isCyrillic(ch: string) {
      let code = ch.charCodeAt(0);
      return code >= 0x21 && code <= 0x17F;
  }

function isWordBreakChar(ch: string) {
    if (isLatin(ch) || isCyrillic(ch)) {
        if (breakCharMap[ch]) {
            return true;
        }
        return false;
    }
    return true;
}

I guess decision with css more flexible

[Ovilia]

isCyrillic seems to be a correct way to fix this. I will make a PR. @DmitriyKondratyuk Thanks!