Label is cutting the text characters (The very first and very last))

Hello! I’m having a little trouble with the label text. It only happens when the text is small, but the label cuts a little of the final character. Here:


Now, this is what happens when I add a space at the end and start of the string:


Is it possible to fix it without using an extra space?

Hi, what version of Creator are you using? What are the reproduce steps? Can you provide a demo that reproduces the problem?

The version is Creator 2.4.2.

I created a node with label, changed the font to one that I downloaded from Google Fonts and choosed a small size (12 font size and 12 line height). Though, it seems to happen with any font, even the system one.

Do I need to provide a demo? I created a new empty project and just added node with labels to it. Even the system font has a little cut on the side.


Sorry, I don’t see any difference in the screenshots. Can you upload a demo with the cropping issue?

It seems to crop the antialiasing. If you look the third image in full reoslution you can see the e with a sharp edge, just like the zero in the first image of this post. Anyway, here is a test that I created: (865.1 KB)

If you look closely and zoom in on both x labels, it should show this:


When there is no spaces, there is a sharp cut on the antialiasing. With spaces, the problem is gone and the letter is shown very cleanly.

I’ve also noticed many fonts getting cutted from either sides or top/bottom. I think it has something to do with how the (often ttf) fonts are built. I’m not sure how other software or browsers handle different fonts and why some fonts doesn’t work properly with cocos.

Most of the time my issues has been top/bottom cutting off and then I can just manually add more lineheight, which is not optimal, but somehow you can counter it.
Sometimes fonts are not centered, so you have to adjust a few pixels up and down to have the font in visual center.

What is causing this behavior and difference between fonts @yufang.wu?

The font is first drawn to the canvas and then rendered, the size of the canvas is determined by the results of measureText. If the normal size of the text under the crop is more obvious, you can expand the width of the characters in the TTF editor, leave some space, to ensure that the results of measureText can cover the entire character. It will be obvious after enlargement in the editor, but the actual game will not have such a situation, or the engine should add some size to the measureText result, but it will add some memory.

1 Like