Text Baseline on Desktop vs. Mobile

[Crabman]

Alrighty, so we're still tweaking our Wizard game a bit and we've stumbled upon a bit of a weird bug recently, namely that text placements differ on desktop and mobile.

 

This is what it's supposed to look like:

 

 

But when the exact same thing is opened on Android or iOS, we get this:

 

 

Now, since there's absolutely no difference between the two versions except for the decive it's played on and it's happening only with text objects, and just the vertical placement at that, I was thinking, perhaps there's something up with the baseline. I really don't know much about what's happening under the hood there, but I was wondering whether mobile browsers perhaps don't provide some values used to calculate the baseline or something so it ends up being drawn elsewhere even though the position is the same.

 

Is that possible? And is there some way to manually define a baseline? Or could this be something else entirely? I'm a bit stumped here, so any help would be greatly appreciated.

[MichaelD]

Are you using phaser.text or phaser.bitmapText?

[hackenstein]

Are you using phaser.text or phaser.bitmapText?

 

We're using phaser.text.

Also you can test it for yourself here: http://hypnoticowl.com/games/the-wizard/play/

 

We're currently using Phaser v2.0.7 and I'm thinking about upgrading, but I doubt that this is the problem.

[qdrj]

I always encounter this issue with different fonts. Baseline changes in different desktop browser (chrome/firefox), and different OS.

I use workarounds like

if (game.device.firefox) {    text.y += 12;}

It will be great if someone will advise more correct/universal solution.

[gmalone]

We're using phaser.text.

Also you can test it for yourself here: http://hypnoticowl.com/games/the-wizard/play/

 

We're currently using Phaser v2.0.7 and I'm thinking about upgrading, but I doubt that this is the problem.

Nice.  Take me back.  Damn rats!  

[hackenstein]

 

I always encounter this issue with different fonts. Baseline changes in different desktop browser (chrome/firefox), and different OS.

I use workarounds like

if (game.device.firefox) {    text.y += 12;}

It will be great if someone will advise more correct/universal solution.

 

 

Judging from the lack of alternatives, it looks like this is the way to go then.

You don't happen to have a collection for common browser/OS workarounds handy, or do you?

[qdrj]

Judging from the lack of alternatives, it looks like this is the way to go then.

You don't happen to have a collection for common browser/OS workarounds handy, or do you?

Nope, I don't Unfortunately vertical offset always changes depending on font and font size so there is no universal solution.