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

To display entire multibyte character like Japanese. #2747

Closed
kntmrkm opened this issue Jun 10, 2016 · 12 comments
Closed

To display entire multibyte character like Japanese. #2747

kntmrkm opened this issue Jun 10, 2016 · 12 comments

Comments

@kntmrkm
Copy link

kntmrkm commented Jun 10, 2016

A character does not display entirely like below.

filii

Are there a any solution?

Version is

  • Version: 1.0.2

thanks.

@etimberg
Copy link
Member

I have a feeling this is related to the measurement of the height of the characters. @kntmrkm can you put this in a fiddle?

@sassomedia
Copy link
Contributor

Actually seeing this in v2.1.4 as well in the x-axis label: https://jsfiddle.net/1zzbv13m/2/. Haven't looked much further into it yet though, possibly the scaleLabel.labelString positioning?

@etimberg
Copy link
Member

@sassomedia interesting, thanks for the fiddle. I think the multibyte character problem is due to the fact that you can't actually measure the height of the text on the canvas. The return of measureText only has the width property set because no browsers implement it. https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics

@sassomedia
Copy link
Contributor

@etimberg hmm, wouldn't the text height be equal to the font size? I think the issue is not so much related to multibyte character, just in general that the text is clipped. In @kntmrkm 's example, the "KakaoTalk" is cut as well. It just seems that it's more pronounced in v1 than in v2.

Added couple Japanese and Kanji characters to my existing fiddle, and it's actually fine, compared to the roman letters: https://jsfiddle.net/1zzbv13m/3/. I guess the type of font used might also play a role, as some go further below the baseline. Given that the font size spans the whole range of above and below the baseline, I think factoring in font size could work as a measurement.

@etimberg
Copy link
Member

@sassomedia right now the height is simply the font size. Some investigation is definitely required

@fulldecent
Copy link
Contributor

Hello, today I am closing all issues that are only affecting version 1 of Chart.js as WONTFIX.

If this issue does affect version 2 as well, I apologize for the error. Please create a test case against Chart.js 2 using on of the below websites and we will be happy to reopen the issue and update its classification:

@sassomedia
Copy link
Contributor

@fulldecent this has been closed in error, see my comment above as it also affects v2. I guess the label was just not updated.

@sassomedia
Copy link
Contributor

@fulldecent thanks!

@etimberg
Copy link
Member

This still reproduces in v2.5.0 but if the solution described in #4006 is implemented, it could also be used to fix this.

@benmccann
Copy link
Contributor

benmccann commented Aug 2, 2017

@etimberg did your PRs #4382 or #4387 fix this one?

@etimberg
Copy link
Member

etimberg commented Aug 2, 2017

@benmccann I don't think either addressed this directly. We'd need to add a similar lineHeight for the tick labels to full address this I think

@nagix
Copy link
Contributor

nagix commented Oct 24, 2018

I think the original issue (tick labels) was fixed before v2.0.0, and the additional issue (scale label) was fixed via #4531 by introducing the default lineHeight value: 1.2. So, I'm closing this.

@nagix nagix closed this as completed Oct 24, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
No open projects
Development

No branches or pull requests

7 participants