Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Adjusted text positioning #308

wants to merge 4 commits into


None yet
3 participants

Here are some adjustments regarding positioning of text.

Please have a look at this side by side comparisons:
Current implementation: http://jsfiddle.net/franatique/URwG8/
Adjusted implementation: http://jsfiddle.net/franatique/URwG8/1

See also: http://www.w3.org/TR/SVG/text.html#TextLayoutIntroduction

How come the options are dropped here?


franatique replied Nov 14, 2012

options may contain with or height values wich will override the values from the image tag. This is unwanted because the image width and and height are needed for positioning and stretching.


kangax commented Nov 14, 2012

Hey @franatique. Addition of text-anchor import into textAlign property is reasonable. But we can't "fix" text to have origin at the bottom-left corner. If we do that (and we plan to support dynamic origin of transformation in the future) — we'll need to change it in other objects as well. We can't have path objects rendering different than text ones.

As a fix, I made it earlier so that SVG-imported elements are rendered properly (try using fabric.util.groupSVGElements) by performing this conversion.

I made the changes because adhering to standards seems to me a crucial factor for adoption. People are used to work with positioning in SVG in Canvas whereby both use same positioning algorithms. (Baselines and anchors in the lower left). With this intention I created the testcase to depict the differences. By merging my changes in fabric would become more SVG friendly. As SVG wins back its importance these days it would be a logical step to me.
I also vote for dynamic transformations but on a per object basis.

lukluk commented Jan 6, 2013

may be like my problem #369


kangax commented Jan 23, 2013

Need to integrate this with newly-introduced originX/originY and update to latest version.

@kangax kangax closed this Jan 23, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment