Dynamic text positions differently on browsers

[GoryGreg]

Hi,

I have published an HTML Canvas file and for some reason the dynamic text sits differently on Chrome than it does on Firefox.

In the image below on Chrome the dynamic text sits perfectly, and how I have placed it in Animate within the buttons...

But below on Firefox the text displays a bit higher in the button...

I use dynamic text as I reuse this code and FLA a lot.

It's not the worst but aesthetically looks bad in my opinion.

I am thinking this might just be a browser issue but thought I'd ask first.

Thanks

G

[Colin Holgate]

You may have noticed that the text in Firefox is a lot smaller. Could it be that Firefox is handling the text DPI setting differently? Does it change at all if you alter your system text scaling setting?

[ClayUUID]

Colin Holgate wrote:

You may have noticed that the text in Firefox is a lot smaller. Could it be that Firefox is handling the text DPI setting differently?

The buttons are smaller too. For some reason the two screenshots have been scaled differently.

[GoryGreg]

Hi Clay,

the final HTML Canvas file is from the same fla file, so is there a possibility that something in that is causing it?

Regarding the scaling of Chrome versus Firefox- I'm not aware of me changing any settings but you never know. I just published and tested the HTML in both browsers.

[GoryGreg]

Hi Colin,

Thanks for your suggestion. I tried the text scaling but that doesnt make any difference- only resizes the text outside the canvas.

[ClayUUID]

It's normal for canvas text to render slightly differently in different browsers, but not THAT differently. You must be doing something else that's throwing it off.

[just.emma]

Does it look more consistent if you use a Typekit or Google web font?

Using Google fonts in Animate CC

Using Typekit Web fonts in Animate CC

[gperry91 · Accepted solution]

This is a bug with how Firefox handles the text baseline property. You are not doing anything wrong.

View the issue on GitHub:

Text Alignment issues with Firefox · Issue #650 · CreateJS/EaselJS · GitHub

You can add this bit of JavaScript to your project to see if it helps...

var firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
if (firefox && createjs)
{
  createjs.Text.prototype._drawTextLine = function(ctx, text, y)
  {
  // Adjust text position only if textBaseline is "top"
  if (this.textBaseline === "top")
  {
  var lineHeight = this.lineHeight || this.getMeasuredLineHeight();
  y += lineHeight * 0.3;
  }
  // Chrome 17 will fail to draw the text if the last param is included but null, so we feed it a large value instead:
  if (this.outline) { ctx.strokeText(text, 0, y, this.maxWidth||0xFFFF); }
  else { ctx.fillText(text, 0, y, this.maxWidth||0xFFFF); }
  };
}

[GoryGreg]

Thanks gperry91- that works a treat on Firefox. I just had to tweak the y line to 0.2. And everything good with Chrome too. Cheers!

Hi just.emma - I am using Google fonts but might try Typekit Web fonts when I get the time to see if that help improves it, but as mentioned by gperry91 it seems to be a Firefox problem.

[CTPEJIOK22]

thanks, man, you help me a lot!