Text getting cropped / cut-off - (updated issue)

[yougotashovel]

The Issue

Text object is getting cut-off / cropped at the top and sometimes on the bottom, when using a custom font with a narrow width. (screenshot attached)

 

The fonts in question work correctly in every other environment, and even work with HTML canvas and the regular getContext method of adding text. So i'm fairly positive the issue is isolated to Phaser using HTML canvas. 

 

Possible Cause

I think issue is most likely happening due to the way Phaser/PIXI calculates the height of text from the width of letters. Possibly using the width of the widest letter and assuming the height? I tried to work out what the source code is doing.

 

Current Workaround

The only workaround i've found is rebuilding the font and adding a wide margin to each letter (so the letter boundaries are more 'square'), then in Phaser splitting a Text object into individual Text objects for letters and calculating their position based on letter width, and manually subtracting a value to change the letter spacing.

 

But even splitting and repositioning doesn't work that well (with any font, not just thin fonts) i have to calculate separate margins for even thinner letters like 'I', 'i', or 'l', or wide letters like 'm' and 'w'.

 

I would rather not use BitmapText as i need to use different font sizes.

 

Solutions

Has anybody else encountered this issue? Found a solution or a better work-around?

 

Thanks.

[yougotashovel]

Update: I have found that if i use wordWrap in the text styling, then the first line of text has the same cutoff at the top, and the font works fine for all lines below.

 

So i think this is an issue with the bounds of the text object.

 

1. Is there a way to change the bounds of the text?

 

2. or add a padding to the text object, so the text is further away from the border of the object?

 

 

 

I still haven't found a solution, If anybody could help it really would be appreciated.

 

Thanks

[stauzs]

Hi,

 

method which doesn't work correctly:

PIXI.Text.prototype.determineFontProperties https://github.com/photonstorm/phaser/blob/master/src/pixi/text/Text.js#L352

 

probably only way to make this work is to fix that function.

if you are using only 1 custom font - you can just overwrite that function and hardcode values.. if not - then it will require more work

 

here is the idea in the code:

PIXI.Text.prototype.determineFontProperties = function(fontStyle){	var properties = PIXI.Text.fontPropertiesCache[fontStyle];	if(properties){		return properties;	}	properties =  {		ascent: 30,		descent: 10,		fontSize: 50	};	PIXI.Text.fontPropertiesCache[fontStyle] = properties;	return properties;};

 

[yougotashovel]

Great! This is exactly what i was looking for.  I threw your code in, and that gave me a good indication of what i needed to do.

 

I copied the PIXI text prototype, and changed line 369 from this:

baseline = baseline * 1.4 | 0;

To this:

baseline = baseline * 1.6 | 0;

1.8 is too much, it changes the cutoff to the bottom of the text.

 

I should probably tweak the code more to get the anchors working perfect, but this is a good fix for now.

 

Thanks so much!

[aspector247]

I had a similar problem. The "i's" were getting cutoff on the topmost line of text. 

I was able to fix this by adding the i to the measured text which is by default: |MÉq

After adding an i to this it correctly understood the ascent and descent properties within this function.
Here are the lines I changed within Phaser.Text.prototype.determineFontProperties

var testText = '|MÉqi';
var width = Math.ceil(context.measureText(testText).width);
var baseline = Math.ceil(context.measureText(testText).width);

 

[dragonlitdesigner]

Here is perhaps the solution. I was having this problem using the Google Font Loader. 

https://phaser.io/examples/v2/text/text-padding

https://phaser.io/examples/v2/text/google-webfonts

 

[ZackNVISIA]

On 2/8/2017 at 6:25 PM, dragonlitdesigner said:

Here is perhaps the solution. I was having this problem using the Google Font Loader. 

https://phaser.io/examples/v2/text/text-padding

https://phaser.io/examples/v2/text/google-webfonts

 

I like how in the google-webfonts example the last character "s" is cutoff XD