Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InputText and TextBlock work incorrectly with Unicode characters (Emoji, for example) #8822

Closed
AntonKosov opened this issue Aug 27, 2020 · 5 comments
Assignees
Labels

Comments

@AntonKosov
Copy link

Link on the forum

Repro

  • Bug repro on jsfiddle
  • Expected result: Unicode characters should be drawn correctly.
  • Current result: Unicode characters are split by bytes (backspace deletes parts of Unicode characters, TextBlock splits Unicode characters incorrectly).

Screenshots
image

Desktop:

  • OS: MS Windows 10
  • Browser: Chrome
  • Version: 84.0.4147.135 (Official Build) (64-bit)
@RaananW
Copy link
Member

RaananW commented Aug 27, 2020

The issue is due to these lines:

while (line.length > 2 && lineWidth > width) {
            line = line.slice(0, -2) + '…';
            lineWidth = context.measureText(line).width;
        }

in textBlock.ts

Javascript has an issue with unicode, but it seems like for(let s in text) splits the string correctly. Fix should be trivial

@RaananW RaananW self-assigned this Aug 27, 2020
@RaananW RaananW added in progress Someone is currently working on this issue bug labels Aug 27, 2020
@Popov72
Copy link
Contributor

Popov72 commented Aug 27, 2020

Unfortunately the fix won't be trivial because for (let s in text) works only in es6 and we target es5!

There are other locations where we will have to perform some changes: text.length does not work correctly when using >16 bits unicode char, so all code using substring with some variation of text.length will have to be changed too.

Targeting es6 would make the fix easier, else I think it can be a tedious task...

@RaananW RaananW removed the in progress Someone is currently working on this issue label Aug 27, 2020
@RaananW
Copy link
Member

RaananW commented Aug 27, 2020

Yep, just realized that as well. So, not trivial :-)

we won't target es6 only (especially due to our UMD module)

@RaananW RaananW added the in progress Someone is currently working on this issue label Aug 27, 2020
@RaananW RaananW removed the in progress Someone is currently working on this issue label Aug 27, 2020
@RaananW
Copy link
Member

RaananW commented Aug 27, 2020

Array.from does the job, but sadly not available in IE11. so I had to keep the old code for back-compat

@Popov72
Copy link
Contributor

Popov72 commented Aug 27, 2020

Nice!

Note that there are also some problems with the InputText control (maybe it's for another PR?).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

4 participants