Copy link to clipboard
Copied
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.
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
Nice project
Copy link to clipboard
Copied
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