Skip to content Skip to sidebar Skip to footer

Easeljs Custom Font Lineheight Cross Browser Issues

I'm having a few issues with the positioning of text looking vastly different in different browsers with Easel JS when embedding a custom font. I think it may be the line height, b

Solution 1:

The following font attributes are available on the drawing context (canvas):

  • font can be anything you would put in a CSS font rule. That includes font style, font variant, font weight, font size, line height, and font family.
  • textAlign controls text alignment. It is similar (but not identical) to a CSS text-align rule. Possible values are start, end, left, right, and center.
  • textBaseline controls where the text is drawn relative to the starting point. Possible values are top, hanging, middle, alphabetic, ideographic, or bottom.

When drawing to the canvas set the textBaseline explicitly (js):

context.textBaseline = "alphabetic";

http://diveintohtml5.info/canvas.html

Did you try the text-rendering declaration? (css)

text-rendering: geometricPrecision;

https://developer.mozilla.org/en-US/docs/Web/CSS/text-rendering

Disclaimer: These are just wild guesses since you didn't supply any code.

Post a Comment for "Easeljs Custom Font Lineheight Cross Browser Issues"