-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Browsers render "top" textBaseline inconsistently #235
Comments
Just noticed this. There is also a difference between phantomjs on windows and phantomjs on linux, but that may be due to the different set of fonts on the systems (the only font i am using is on both, but perhaps standard fonts?). Setting the textBaseline to "alphabetic" yields the same ouput on both platforms. |
This is unfortunately a browser issue, and we don't really have any way to reliably work around it. Feel free to vote on the bug to try to hasten its fix. |
It seems most browsers are pretty consistent with the baseline these days, but in CreateJS the difference seem to have increased. Is there something in the code to compensate for the differences which is now basically overcompensating? |
@arnovanoordt There is no compensation in CreateJS. |
Chrome 71 is inline with Firefox now, so we may consider a built-in solution. |
Hi @lannymcnie, the font alignment problem is also there when publishing from Animate CC. When will the fix be available? will it be there in Animate as well? thanks Matteo |
We are hoping for a fix in 1.x shortly. I can't speak to Animate's availability, as Adobe would have to bring in new EaselJS builds themselves. We are hoping that 1.0 is incorporated into a future build of Animate at least, but it won't address that. |
Thank you, in that case we'll point to createjs latest release. Also my colleague proposed a solution over stackoverflow if you're interested. It's working ok, just worried about performances |
We've observed that "alphabetic" is consistently implemented (in the browsers and versions in our tests). So a quick workaround is to set the TextField.textBaseline to "alphabetic" and then increment TextField.y by the TextStyle.size multiplied by a constant. However that constant varies between fonts, (usually in the 1...1.25 range). Possibly this constant may be determinable programmatically for a catch-all solution that can then auto-convert "top" to a consistent and backwards compatible implementation? |
@hypersurge I went with a similar approach (https://stackoverflow.com/a/54256368/645252) it's dirt cheap but it works well for most fonts and its consistent cross browser/platform The TextMetrics given by the CanvasRenderingContext2D are not widely implemented in the same way, otherwise we'd have more precise measurements Otherwise opentype.js could be used to get information about the actual baseline positions of the font. I haven't had time to try it yet but I expect it to be a bit more intensive in the calculations, maybe not the best approach on mobile. |
I know you changed the default textBaseline from "alphabetic" to "top" in version 0.5, however FF positions the text differently than Chrome/IE9 (Latest stable builds on Windows). This can also be seen in the Inheritance tutorial that comes with the latest build of easeljs. Maybe setting the default back to "alphabetic" would be better until this issue is resolved, or adding a warning in the documentation.
The text was updated successfully, but these errors were encountered: