Custom font is cut off on top and bottom

Getting Started Newbie Questions
#1

Hey guys, I’m really new to programming, but I’m learning so much every single day. I have a problem with my custom font that I have loaded into Corona. I created the font myself and have used it with no problem in programs like Photoshop, but when I loaded it into Corona, it appears that there is some sort of bounding box that cuts off the top and bottom of the font.

Here’s what it looks like:

154d5z7.jpg

http://i62.tinypic.com/154d5z7.jpg

As you can see, the “C” is cut off at the top and the “p” is cut off at the bottom.

And here’s what my code looks like in the build.settings file:

nxl35j.png

http://i60.tinypic.com/nxl35j.png

Can somebody please help me to figure out what I can do? Thanks so much!

#2

The bounding box is calculated from the font metrics specifications in the TTF. 

The way I understand it, desktop apps “paint” text on-the-fly which allows characters to bleed outside the bounding box without any problems.

Corona on the other hand needs to create a static image of the text. For this it relies on the font metrics in the TTF to calculate the bounding box. If any characters bleed outside the bounding box, they’ll be clipped.

Unfortunately, I’m not sure what can be done to avoid this, short of creating a multiline text object with a newline at the top and bottom of the text.

#3

So, I’ve gone in to my font creation program, FontForge, and have fiddled around with all the metrics of my font, and none of it seems to make any difference when it comes to Corona or this problem. It always just comes out the exact same. Maybe I’ll keep trying.

#4

I would save yourself the trouble and just make a bitmap font out of it, using something like GlyphDesigner.

#5

Ingemar really described the issue well.  We are dependent on the OS’s font rendering and we render to an image file.  If the metrics of the font allow it to bleed out of the box, there isn’t much we can do about it.  Also, you will find that they will render differently between Windows, OS-X, iOS and Android. 

I think Ingemar’s suggestion on doing it in multi-line mode to force some padding might be a workable solution.

#6

@Gremlin

I just downloaded a demo of GlyphDesigner, however export isn’t allowed so I can’t see what type of formats are supported.

Is it easy to use the output from GD with Corona?

#7

The bounding box is calculated from the font metrics specifications in the TTF. 

The way I understand it, desktop apps “paint” text on-the-fly which allows characters to bleed outside the bounding box without any problems.

Corona on the other hand needs to create a static image of the text. For this it relies on the font metrics in the TTF to calculate the bounding box. If any characters bleed outside the bounding box, they’ll be clipped.

Unfortunately, I’m not sure what can be done to avoid this, short of creating a multiline text object with a newline at the top and bottom of the text.

#8

So, I’ve gone in to my font creation program, FontForge, and have fiddled around with all the metrics of my font, and none of it seems to make any difference when it comes to Corona or this problem. It always just comes out the exact same. Maybe I’ll keep trying.

#9

I would save yourself the trouble and just make a bitmap font out of it, using something like GlyphDesigner.

#10

Ingemar really described the issue well.  We are dependent on the OS’s font rendering and we render to an image file.  If the metrics of the font allow it to bleed out of the box, there isn’t much we can do about it.  Also, you will find that they will render differently between Windows, OS-X, iOS and Android. 

I think Ingemar’s suggestion on doing it in multi-line mode to force some padding might be a workable solution.

#11

@Gremlin

I just downloaded a demo of GlyphDesigner, however export isn’t allowed so I can’t see what type of formats are supported.

Is it easy to use the output from GD with Corona?

#12

Just ran into the same problem with our game. I made a custom font from scratch using FontStudio 5 and we found the letters cut off at the top on iOS devices. I adjusted the metrics of my font for the caps and ascender lines to allow space above the letters (which before were a tad too low, cutting into the letters so the problem we encountered made perfect sense) and it now looks to be fixed on device!!

So, maybe give FontStudio a whirl, perhaps you’ll have more luck. The fix seems perfectly logical.

#13

Just ran into the same problem with our game. I made a custom font from scratch using FontStudio 5 and we found the letters cut off at the top on iOS devices. I adjusted the metrics of my font for the caps and ascender lines to allow space above the letters (which before were a tad too low, cutting into the letters so the problem we encountered made perfect sense) and it now looks to be fixed on device!!

So, maybe give FontStudio a whirl, perhaps you’ll have more luck. The fix seems perfectly logical.