Text positioned incorrectly in IE

[all-iver]

The docs say that Text is anchored on the top left (meaning that the top left of the text object will be positioned at its origin), but in Firefox it's the bottom left. For instance:

new Rect(0, 0, 50, 50).fill("red").addTo(stage);
var t = new Text('hi').attr('fontSize', '50px').attr('x', 0).attr('y', 0).addTo(stage);

In Chrome, the text is inside the rectangle. In Firefox, it's above it.

Workaround: adding a css rule for "tspan { alignment-baseline: alphabetic; }" makes Chrome act the same as Firefox (incorrectly, but at least it gets them doing the same thing). Firefox does not seem to respect the alignment-baseline attribute, which may be the cause of the problem.

[basecode]

Thanks for reporting this bug. To keep the Text API consistent with other DisplayObjects we should try positioning the Text at top left also in FF. Maybe style="dominant-baseline:hanging" works? Afaik "dominant-baseline" and "alignment-baseline" are supposed to do the same thing.

[basecode]

Fixed in version 0.4.3.

[lmeurs]

Unfortunately the problem still seems to exist, at least in IE 10, see the example at http://jsfiddle.net/lmeurs/bDSxJ/1/ using BonsaiJS 0.4.3 and @all-iver's code. Chrome 28, Firefox 22 and IE 10 position text differently on a Windows 7 workstation.

Chrome and Firefox place the text inside the rect, but Firefox positions it a bit off (rendering difference?), but IE places the text on top of the rect.

[basecode]

Thanks for reporting. We definitely need a strategy for running code on multiple platforms before deploying. I did a screenshot (via Sauce Labs) of win7 + IE10.

[basecode]

FYI: https://connect.microsoft.com/IE/feedback/details/801719