I'm working with Adobe Animate 20.5.1.
In Animate, my project has properly aligned text:
When I publish my HTML5 project and open it in a browser, the text is not aligned:
This happens no matter if my text is Static, or Dynamic.
Is this a bug? Or am I doing something wrong?
Hi, Thanks for reaching out.
Could you please share a sample FLA file to reproduce and investigate further ?
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.
Browser rendering appears to be perfectly consistent, and is consistently different from what Adobe Animate shows.
The fla, and the font file:
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.
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.