• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Text not aligning properly

Explorer ,
Jul 23, 2020 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

617

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
community guidelines
Adobe Employee ,
Jul 23, 2020 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 ?

Votes

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
community guidelines
LEGEND ,
Jul 24, 2020 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

 

Votes

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
community guidelines
Explorer ,
Jul 24, 2020 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.

Votes

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
community guidelines
Explorer ,
Jul 28, 2020 Jul 28, 2020

Copy link to clipboard

Copied

LATEST

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. 

Votes

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
community guidelines