Inspiring

Question

Canvas Dynamic text sitting too high

Forum|Forum|7 years ago
January 3, 2019
5 replies
6893 views

I have an HTML5 Canvas game, which uses the google font Open Sans, I've picked the font in Animate, the field is set to be dynamic, but when published the font ends up sitting too high when viewed in Chrome and in Firefox, Edge displays it absolutely fine. The font is clearly loading okay, and I can clarify that in the web inspector, it's just rendering in the wrong position. If I change the text to be static it's all fine, but that's not a solution I can use throughout the game.

I thought it might have been the font, so I changed it to Noto Sans, but that behaves the same.

This previously hasn't been a problem, these games have been running for over 6 months with this method, but only recently have the fonts decided to shift up.

Anyone else had this problem?... and know of a fix.

Andy

This topic has been closed for replies.

thewebprojects

Participating Frequently

Using a web safe font seems to resolve the issue.

dcastillo1

Participating Frequently

August 2019 and this is still a thing

avid_body16B8

Legend

Yes.

So depending on what I do, sometimes I use images instead of dynamic text. In the case below I had to because the text could be one line or 2 lines and I had to have them align perfectly.

Example:

3 answer buttons with 14 different text added to a movieclip with labels. Each button contains the movieclip
randomize the frame that shows in each button (one always contains the correct answer the other 2 are incorrect)
check the answer

It would have been even harder to place the text correctly when it alternates between 1 line and 2 lines and the variation of position of dynamic text between the browsers.

But if I am using a text field I basically know that the position will never be perfect.

J

jessib79568446

Participant

Does anyone know if this has been reported to Adobe and/or if there's a workaround within Animate (not having to adjust code)?

This single bug may be the reason why my team continues producing static digital ads in Photoshop instead of moving forward with dynamic ads in Animate.

avid_body16B8

Legend

Frankly this is common to anything that depends on text fields which will appear differently depending on the browser. I do not think there is a way to predict what browser will decide to show. This has been an issue in CSS and HTML5 since the beginning. In my experience you can never trust the position of a dynamic text or text in general as it relates to other elements.

J

jessib79568446

Participant

The bitter irony is I don't even need or want to use dynamic text — but when I typeset using static text, it's exported for Canvas as raster graphics and looks like garbage. Retina displays (300+ PPI) have been around for nearly a decade. More than half of all business is done on mobile. I don't understand why low resolution imagery is still the standard for web.

Has anyone else found a solution for text that both looks sharp AND stays put upon export?

G

GoryGreg

Inspiring

Yeah this has happened to me with dynamic text on Chrome recently but I thought I was alone.

I always had problems with Firefox but then Chrome started doing it. On a scale of 1 to 10 of needing fixed (10 being top priority) then it is a 10. It sets things off BADLY. But I'm not sure if a CreateJS problem- I think it's more to do with the annoying browsers. Chrome is a major pain in the butt at the minute.

Anyway, for Firefox place in first frame code (I've commented where to change number to move up and down)...

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; // decrease number to move font up and increase to move down

}

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

};

}

For Chrome, use similar but change name where needed...

var chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;

if (chrome && 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; // decrease number to move font up and increase to move down

}

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

};

}

This maybe work also for other browsers i.e. changing name but I havent tried.

We shouldnt have to do this!

redtangleAuthor

Inspiring

It's certainly a 10, every button I have in in around 30 games now has the text floating out the top by a few pixels.

Thanks for the code snippet, thankfully all my games run through the same framework, so I can apply the fix globally and it should update all the games without me needing to re-publish them all. Just hoping that if a fix is applied to createJS, it then doesn't go and mess this code up.

redtangleAuthor

Inspiring

* UPDATE *
This appears to be related to the old fix for Firefox and baseline top, and it's now an issue for Chrome 71+

https://github.com/CreateJS/EaselJS/issues/235

Hopefully something can be added to CreateJS to fix this, as I think a whole load of people's projects are going to be bust right now.

dcastillo1

Participating Frequently

this also happen on Chromium 68.0.3440.75 built on Debian 9.5

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded