xDan Posted July 14, 2014 Share Posted July 14, 2014 Hello there! Pictures speak better, in Firefox vs Chromium my text appears vertically aligned differently with the same code: Firefox:Chromium:As you can see, in Firefox the text is aligned correctly to the top, while the bottom aligned text has a large space below it. And in Chromium it's the opposite; the top aligned text has space above while the bottom aligned text is aligned correctly.Is this a known bug, am I doing anything wrong? It makes things like nicely positioning text on buttons difficult.Also, are there any built in ways to get things like maximum height of a font, baseline, median line...? (Guess I can find the max height by generating a text a-zA-Z and testing the result but it's a bit of a hack.)Source:<!doctype html><html><head> <meta charset="utf-8"> <title>Text Alignment Test</title> <script src="phaser.min.js"></script> <script>var game = new Phaser.Game(500, 500, Phaser.AUTO, "");function MainState(){}MainState.prototype.preload = function(){ game.stage.backgroundColor = "#ffffff"; game.scale.pageAlignHorizontally = true; game.scale.pageAlignVertically = true; game.scale.refresh();}MainState.prototype.AddText = function(x,y,str){ var text = game.add.text(x,y, str); text.font = "sans"; text.fontSize = 48; text.fill = "#808080"; return text;};MainState.prototype.create = function(){ this.AddText(0,0,"Top Aligned").anchor.setTo(0,0); this.AddText(0,game.height, "Bottom Aligned").anchor.setTo(0,1);};game.state.add("main", new MainState());game.state.start("main"); </script> <style type="text/css"> body { margin: 0; padding: 0; background: #000; } </style></head><body></body></html> Link to comment Share on other sites More sharing options...
xDan Posted July 14, 2014 Author Share Posted July 14, 2014 From further research, seems this difference is a known bug with Firefox: http://www.html5gamedevs.com/topic/2646-text-alignment/ https://bugzilla.mozilla.org/show_bug.cgi?id=737852 (though I would still say the top alignment method isn't good) Anyway, since the bug is with textBaseline="top", a possible workaround seems to be in PIXI.Text.prototype.updateText, changing textBaseline to "bottom" rather than "top". Then add an extra lineHeight to linePositionY in places below to compensate. is there anyone more familiar with this stuff to confirm if this is a valid solution? (and maybe even submit a patch ) Link to comment Share on other sites More sharing options...
korgoth Posted August 28, 2014 Share Posted August 28, 2014 Did you found any solution except go with bitmaptext? Link to comment Share on other sites More sharing options...
Recommended Posts