How to align text the same way in Chrome and Firefox

How to align text the same way in Chrome and Firefox
0.0 0



When I use cc.LabelTTF my text is aligned differently in Firefox and Chrome. I’m explicitly adding the cc.TEXT_ALIGN_CENTER and cc.VERTICAL_TEXT_ALIGNMENT_CENTER options in the code as well.

Can I add a css fix of some sort to ensure that the text is aligned the same way?


Could you post your snippet of code and screenshots of exactly what’s different? There’s no css for LabelTTF or anything like that.


Could it be related to using cc.TEXT_ALIGNMENT_CENTER instead of cc.TEXT_ALIGN_CENTER?


Sorry! We are using cc.TEXT_ALIGNMENT_CENTER

This is the call to the function:

label.draw(this,“OldStandard-Bold”,22,new cc.Color3B(255,175,16),“ENTER”,0.5,0.5,57,17,

Function prototype is:

function draw(currentLayer, fontName, fontSize, fontColor, value, anchorX, anchorY, posX, posY, verticalAlignment, horizontalAlignment, layer, TAG, addTo)


label.draw? Are you extending cc.LabelTTF? There is a draw function already in cc.Node (which cc.LabelTTF inherits).

Try changing that name. If that doesn’t fix anything, I’m afraid we’ll need to see more source code than your call to the function.


This is how it looks in chrome and mozilla

Left Side Image In - Chrome version Version 55.0.2883.87 m (64-bit)
Right Side Image In - Mozilla Firefox Version 50.1.0

I have used this code

var TestLayer = cc.LayerColor.extend({
    ctor: function () {
        this._super(cc.color(255, 255, 255));

        var lineUp = new cc.DrawNode();
        lineUp.drawSegment(cc.p(0, 0), cc.p(200, 0), 0.5, cc.color(80, 80, 80));
        lineUp.setPosition(cc.p(this.width / 2 - 100, this.height / 2 + 13));

        var lineDown = new cc.DrawNode();
        lineDown.drawSegment(cc.p(0, 0), cc.p(200, 0), 0.5, cc.color(80, 80, 80));
        lineDown.setPosition(cc.p(this.width / 2 - 100, this.height / 2 - 17));

        var label = new cc.LabelTTF("Lorem Ipsum", "Arial", 30);
        label.setColor(cc.color(0, 0, 0));
        label.setPosition(cc.p(this.width / 2, this.height / 2));



@shashankA Did you found a solution?


Yes I am usign Phaser


pandamicro @slackmoehrle
Any ideas? Please?

I found out that cocos2d-html5 uses a div to find out the height of a label. See
But here the fontFamily is always set to Arial. To be honest, I don’t know if this is the right place.
There must be a solution… With the release of firefox quantum the usage of firefox will rise.

Chrome Screenshot:
Firefox Screenshot:

We used cocos studio (yeah, our game is some years old) to design the ui. But this shouldn’t matter. The Font also looks a bit bigger in chrome. Firefox looks kinda bad rendered.

I also used the font directly in firefox. When the line-height is set to 100% there is no extra space between the lines (like it should be). When the line-height is set to ‘normal’ there is space. Maybe this is the reason for the bigger space between the lines rendered in webgl?

line-height: normal in ff

line-height: 100% in ff

Thank you!

To test the newest version (3.6) I created a new project and checked the font-positioning.



I am not sure. Let me ask someone to read this post.


Hi, @Michael

The real rendering of LabelTTF is in the drawLabels function of CCLabelTTFCanvasRenderCmd.js, it’s for both Canvas and WebGL render mode.

I assume that lineHeight should be set too when rendering the label, or it can be set to the _labelCanvas style. Give it a try


I tried locCanvas.lineHeight = “normal”; and locCanvas.lineHeight = “100%”; in the CacheRenderCmd function but that doesn’t change anything…