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

Recommended Posts

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.



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




Share this post

Link to post
Share on other sites

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.



Share this post

Link to post
Share on other sites



method which doesn't work correctly:

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;};


Share this post

Link to post
Share on other sites

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!

Share this post

Link to post
Share on other sites

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);


Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.