How to align text the same way in Chrome and Firefox

cocos2d-x JavaScript
#1

Hi,

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?

#2

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

#3

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

#4

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,
cc.VERTICAL_TEXT_ALIGNMENT_CENTER,cc.TEXT_ALIGNMENT_CENTER,1,-1,this.getChildByTag(this.ENTERSIGNTAG));

Function prototype is:

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

#5

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.

#6

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));
        this.addChild(lineUp);

        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));
        this.addChild(lineDown);

        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));
        this.addChild(label);

    }
});

#7

@shashankA Did you found a solution?

#8

Yes I am usign Phaser

#9

pandamicro @slackmoehrle
Any ideas? Please?

I found out that cocos2d-html5 uses a div to find out the height of a label. See cocos2d-html5/CCLabelTTF.js at develop · cocos2d/cocos2d-html5 · GitHub
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:
image
Firefox Screenshot:
image

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

ff_line-height-normal
ff_line-height-normal889×375 118 KB

line-height: 100% in ff

ff_line-height-100
ff_line-height-1001018×426 125 KB

Thank you!

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

Firefox:
image
Chrome:
image

#10

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

#11

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

#12

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

#13

Hi @pandamicro @slackmoehrle Any news on that topic? I just tried Cocos Creator 1.9.0 and Cocos Creator 2.1.0 and the issue is still there…

UPD: now it’s the case in Chrome too (starting from version 71)

#14

@id_ilych this topic is pretty old. Let me ask @Big_Bear to review this topic and help out.

1 Like
#15

@slackmoehrle @pandamicro

Any update on this issue?

I have noticed this issue too with updated chrome version. Text seems to be aligned bit above for all the Label.

Thanks,

#16

@Gurudath I’ll reach out to the engineering team.

What version of Creator are you using?

#17

@slackmoehrle

Am not using cocos creator.

I have created games using cocos JS. I have tried with Version 3.9, 3.12,3.13 version.
This issue is happening after updating chrome browser Version 71.
I have tested with Chrome Version 70, It’s working fine.

#18

Ok just making sure. I’ll ask the team to take a look at this.

2 Likes
#19

interim option

https://drive.google.com/file/d/1Elfoc4y7sUhw1KGsEP4vK55hHE-iatxy/view?usp=drivesdkhttps://drive.google.com/file/d/1Elfoc4y7sUhw1KGsEP4vK55hHE-iatxy/view?usp=drivesdk

1 Like
#20

@bayquabaoto

Thanks for the solution. This works :slight_smile:

I just wanted to know multiplication factor 0.2 which is used is work around value? Is it fixed for all the Label with different font size?