HTML5: Firefox vs custom font issues

[heavyboots]

Hi folks,

I figured out how to link to a custom font and that's good, but unfortunately Firefox is doing strange things to the baseline of the text.

For example, if you load this in Chrome, IE11, Edge, or Safari it looks perfect. Load it in Firefox and the dot-matrix text in the bottom panel is all about 20px lower and outside of the display areas it is supposed to live in. Any ideas to correct it?

http://handtooledcode.com/html5test/Multiple%20Panels%20Timeline%20Test.html

Thanks in advance,

Eric.

[GoryGreg]

Hi Eric,

I had this problem before too. Someone gave me this code that helps fix the Firefox issue...

   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.1;

  }

  // 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); }

  };

}

Try messing around with the 0.1 value in the line I have put in bold above. Originally the value was 0.3 but I found 0.2 worked for me originally and then on others the value 0.1.

Hopefully this helps you.

BTW whatever you are doing looks great! 🙂

Cheers

Greg

[heavyboots · Accepted solution]

Greg, thanks very much for that!

I had to change the y+= line to y -= because I needed to pull the baseline up not push it down, but it's actually working now!

And thanks—it's aircraft panels for training tutorials basically.

[GoryGreg]

No worries, Eric. Glad you got it working.

Thanks for link Clay. It's a shame they haven't bothered fixing this in all these years. I'm assuming when (I'll not say 'if' and try to be optimistic') they do then the code used at the minute to fix  this problem will then offset it again.

[marjantrajkovski]

Nice project

[ClayUUID]

Not that it helps, but this is a bug that the Firefox team has been aware of for years.

737852 – HTML5 Canvas TextBaseline Top looks different in FF than all other browsers