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

Hovering over point changes the legend fontStyle when set to 'semibold' #3318

Closed
elliottregan opened this Issue Sep 16, 2016 · 4 comments

Comments

Projects
None yet
2 participants
@elliottregan

elliottregan commented Sep 16, 2016

Demo: http://codepen.io/anon/pen/LRkyor

If you hover over a point, you'll see the legend flash between two different font styles and sizes. If you change line 39 from 'semibold' to 'bold', the flickering stops.

@etimberg

This comment has been minimized.

Show comment
Hide comment
@etimberg

etimberg Sep 16, 2016

Member

@elliottregan the issue here is that 'semibold' doesn't seem to be recognized by the canvas and so setting the font silently fails.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight indicates that setting a font weight of '600' is equivalent to semi-bold but I cannot detect a difference between 600 & 800 (bold).

The docs on the canvas rendering context font property https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font just say that it should be a valid CSS font string which we have but the canvas doesn't like it.

For reference, the font is set

ctx.font = "semibold 20px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

Maybe we can detect this case after setting by comparing ctx.font and the value trying to be set and throw a useful error.

@simonbrunel @zachpanz88 thoughts on this?

Member

etimberg commented Sep 16, 2016

@elliottregan the issue here is that 'semibold' doesn't seem to be recognized by the canvas and so setting the font silently fails.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight indicates that setting a font weight of '600' is equivalent to semi-bold but I cannot detect a difference between 600 & 800 (bold).

The docs on the canvas rendering context font property https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/font just say that it should be a valid CSS font string which we have but the canvas doesn't like it.

For reference, the font is set

ctx.font = "semibold 20px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"

Maybe we can detect this case after setting by comparing ctx.font and the value trying to be set and throw a useful error.

@simonbrunel @zachpanz88 thoughts on this?

@etimberg

This comment has been minimized.

Show comment
Hide comment
@etimberg

etimberg Feb 12, 2017

Member

I looked into this more. The problem here is that, the system has no semibold Helvetica Neue font so it's not applied to the canvas rendering context when we set it.

I thought about filing a Chrome issue for this, but the behaviour is the same as for the CSS font property. When the font of a div is set as semibold 20px 'Helvetica Neue' text does not render as expected because its not a valid font.

Test case: https://jsfiddle.net/6zqcsph9/

Recommendation: close as not a bug

Member

etimberg commented Feb 12, 2017

I looked into this more. The problem here is that, the system has no semibold Helvetica Neue font so it's not applied to the canvas rendering context when we set it.

I thought about filing a Chrome issue for this, but the behaviour is the same as for the CSS font property. When the font of a div is set as semibold 20px 'Helvetica Neue' text does not render as expected because its not a valid font.

Test case: https://jsfiddle.net/6zqcsph9/

Recommendation: close as not a bug

@elliottregan

This comment has been minimized.

Show comment
Hide comment
@elliottregan

elliottregan Feb 14, 2017

Gotchya. That's annoying. If there is no way to detect a missing font weight, maybe a note in ChartJS's docs would be useful.

"Heads up! If the defined font wight is not available, rendering issues may occur."

elliottregan commented Feb 14, 2017

Gotchya. That's annoying. If there is no way to detect a missing font weight, maybe a note in ChartJS's docs would be useful.

"Heads up! If the defined font wight is not available, rendering issues may occur."

@etimberg

This comment has been minimized.

Show comment
Hide comment
@etimberg

etimberg Feb 15, 2017

Member

We can definitely do that.

Member

etimberg commented Feb 15, 2017

We can definitely do that.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment