Jump to content

Text vertical alignment across browsers


Recommended Posts

Hello there!


Pictures speak better, in Firefox vs Chromium my text appears vertically aligned differently with the same code:






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.)


<!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

From further research, seems this difference is a known bug with Firefox:



(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

  • 1 month later...

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...