rexrainbow / phaser3-rex-notes

Notes of phaser3 engine
MIT License
1.2k stars 260 forks source link

Wrapping issues when setting wrap mode to `word` or `character` in BBCodeText.TextStyle #298

Closed jrabek closed 1 year ago

jrabek commented 2 years ago

As always your plugins are a super amazing addition to Phaser! Thanks again for all the hard work.

I noticed a couple bugs related to word wrapping and BBCodeText.

In our project we have an autoscaling text component which uses BBCodeText internally and when autoscale is enabled it will attempt to fit the text to the bounds of the component so the text fills up the entire space.

This works fine as long as wrap is none but when wrap is word or character then there are two different bugs that occur.

I included screen shots of the good case, and then issues I see with word and with character along with the text that was attempted to be rendered.

Good case: Wrap is none. Note that I inserted a \n between each word manually just to demonstrate what desired wrapping could look like

Screen Shot 2022-07-15 at 3 40 33 PM

1) When wrap is word

Most of the time this works but occasionally we see a) The word can get cut off at the end b) The word can be really small (seems the text width is not measured correctly?). c) The word can wrap at character boundaries

Screen Shot 2022-07-15 at 3 41 22 PM Screen Shot 2022-07-15 at 3 41 16 PM Screen Shot 2022-07-15 at 3 42 52 PM

2) When wrap is character

I noticed that the character wrap will split multi character emojis which will break them.

Screen Shot 2022-07-15 at 3 43 34 PM Screen Shot 2022-07-15 at 3 43 12 PM

rexrainbow commented 2 years ago

For word wrap mode

a) The word can get cut off at the end

Once length of a word is larger then wrap length, BBCodeText will output this word with cut off result.

b) The word can be really small (seems the text width is not measured correctly?).

Can't get it in your image. I guess that, length of this word plus next word is larger then the wrap length, so BBCodeText put next word as first word of next line.

For character mode

I noticed that the character wrap will split multi character emojis which will break them.

emojis is multiple characters like :) (2 characters) in plain string, so emojis might be wrapped into multiple lines.

jrabek commented 2 years ago

Thanks for the quick reply.

The word wrap issues could entirely be due to how we are autoscaling. I was just surprised since we are setting the font size and checking if the resulting text is too wide and reducing the font size as a result. So maybe what is happening is that the text is getting cut off but is technically narrower than the desired width and so the auto scaling algorithm terminated.

For the character mode, I would expect that the wrapping algorithm would treat a emoji unicode character as a single character and not split it in the middle. Otherwise you can't use emojis with character wrapping.

I'll look at alternative approach to how we do autoscaling!

jrabek commented 2 years ago

I guess though it is weird that in some cases with word wrap the text is cut off and other times it is wrapped at a character boundary (i.e. not a space) to the next line.

rexrainbow commented 2 years ago

Thanks for the quick reply.

The word wrap issues could entirely be due to how we are autoscaling. I was just surprised since we are setting the font size and checking if the resulting text is too wide and reducing the font size as a result. So maybe what is happening is that the text is getting cut off but is technically narrower than the desired width and so the auto scaling algorithm terminated.

I can try to expose a flag if wrapping output a cut-off word. Add to TODO.

For the character mode, I would expect that the wrapping algorithm would treat a emoji unicode character as a single character and not split it in the middle. Otherwise you can't use emojis with character wrapping.

I'll look at alternative approach to how we do autoscaling!

emoji might not be unicode character, as my example at previous post :) are 2 characters, none of them is unicode, BBCodeText can't recognize these 2 characters as an emoji during wrapping the plain string.

rexrainbow commented 2 years ago

I apologize, too-longer-word will be wrapping, see this demo, the 2nd text object at left side. The word loooooonnnnngggeeeerrr has been wrapped into 2 lines.

jrabek commented 2 years ago

Ah thanks for the follow up and demo! I think I understand the issue now in both the word and character cases.

For the word case at some point it has to be wrapped at the character level because the word is too wide. For the character (emoji) case it is hard to tell if a character is part of an emoji sequence without the help of external library that does that effort.

jrabek commented 2 years ago

So in what cases will a word be simply cut off instead of wrapping at a character boundary when wrap is equal to word?

rexrainbow commented 2 years ago

I think word won't be cut of in latest version of BBCodeText. Could you provide a simplest test code for reproducing this case?

jrabek commented 2 years ago

I'll try updating first and if I can still reproduce I'll try to create a simple example.