Highlighted

Text not aligning properly

Explorer ,
Jul 23, 2020

Copy link to clipboard

Copied

I'm working with Adobe Animate 20.5.1.

In Animate, my project has properly aligned text:

 

Screen Shot 2020-07-23 at 4.10.46 PM.png

 

When I publish my HTML5 project and open it in a browser, the text is not aligned:

 

Screen Shot 2020-07-23 at 4.11.54 PM.png

 

This happens no matter if my text is Static, or Dynamic.

Is this a bug? Or am I doing something wrong?

Views

90

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Text not aligning properly

Explorer ,
Jul 23, 2020

Copy link to clipboard

Copied

I'm working with Adobe Animate 20.5.1.

In Animate, my project has properly aligned text:

 

Screen Shot 2020-07-23 at 4.10.46 PM.png

 

When I publish my HTML5 project and open it in a browser, the text is not aligned:

 

Screen Shot 2020-07-23 at 4.11.54 PM.png

 

This happens no matter if my text is Static, or Dynamic.

Is this a bug? Or am I doing something wrong?

Views

91

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 23, 2020 0
Adobe Employee ,
Jul 23, 2020

Copy link to clipboard

Copied

Hi, Thanks for reaching out.

Could you please share a sample FLA file to reproduce and investigate further ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 23, 2020 0
Adobe Community Professional ,
Jul 24, 2020

Copy link to clipboard

Copied

This is an issue with different browser makers interpreting the HTML Canvas spec differently regarding which font metric to use to vertically position text. The problem is more severe in some fonts than others.

 

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

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2020 0
Explorer ,
Jul 24, 2020

Copy link to clipboard

Copied

 MacOS High Sierra SafariMacOS High Sierra SafariFirefoxFirefoxMacOS ChromeMacOS ChromeAdobe AnimateAdobe Animate

 

Browser rendering appears to be perfectly consistent, and is consistently different from what Adobe Animate shows.

The fla, and the font file:

https://drive.google.com/drive/folders/1jHOn9cgVJRfhPgBTODsC-N8WIhZSsJsU?usp=sharing

 

Doing a little digging, this: https://community.adobe.com/t5/animate/html5-canvas-publish-dynamic-text-position-changes/td-p/91936...

 

Fixes it in my Firefox, but does nothing for Chrome or Safari, and doesn't really explain what the issue is.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 24, 2020 0
_tal_ LATEST
Explorer ,
Jul 28, 2020

Copy link to clipboard

Copied

Further testing with other fonts, like Arial, or Courier, shows that browsers are indeed inconsistent. Some will show the same font higher, and others will show it lower. It's a real pain when a font needs to be centered inside of a box like I have above, which makes it super noticeable. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2020 0