Custom font cut off (button widget)

Solar2D iOS
#1

Hei everybody,

I have serious problems with my custom font on iOS devices.

It is cut off some pixels at the top.

On most cases I could fix it (thx to the forums) by adding an empty line at the top of the text and adjusting its position accordingly, but in the button widget I can not do this. Or I don’t know how to do it.

In the corona simulator, Mac and Windows, everything works as it should, but on the Xcode simulator and on device it won’t. 

Please see the attached Images, one from the corona simulator and one from the Xcode simulator.

[sharedmedia=core:attachments:4824] (corona simulator)

[sharedmedia=core:attachments:4825] (xcode simulator)

The only thing I can do for now is to use the system font what looks quite ugly, as the rest of the game is the custom font…

If anybody has a solution for this I would be very happy. I know this was already discussed, but it seems like it was never resolved. 

Thanks, 

Felix

#2

I’m not seeing any cutoff text.

#3

Hello Rob,

The second and the third button on the left side should be “Nähste Karten” and “Zufällige Karten”

But its written only Naheste and Zufallige (without the points on the “a”).

#4

Corona uses the operating system’s native font rendering. Each operating system renders fonts a little bit different. Each operating system also handles inconsistencies in fonts differently as well. When you get free fonts from the Internet instead of from well respected font foundries, they are full of issues in their metrics values and it can cause the text to be rendered differently.

You just have to try different fonts until you find one that the device you’re targeting renders correctly.

Rob

#5

@Felix, alternatively you can use font editing software to adjust the metrics on a font yourself - it’s a time consuming process and you risk fixing one thing only to break another (at least you do if you’re a relative novice at it like me), but it does work if you put in the time. I personally use Fontographer (it’s old but still works in El Capitan), but there are free ones out there such as fontforge (https://fontforge.github.io/en-US/). If you truly love that font, this can be a way of getting it to look right on-device.

#6

Hello Rob and schroederapps,

thank you very much for your responses.

I would love to stay with this font, especially because I donated for the designer to use it widely.

You are right, schroederapps, I could manually adjust the font metrics, I did this once, to add an accent. It took me hours but in the end I could do it, and now I found an updated version with the accent already added.

I will redownload it and see if this resolves the problem, maybe I am lucky…

But @Rob, This is a bigger problem than just finding a font that fits into all devices. Corona has some problem with fonts, or maybe with this font only, on the windows simulator almost every text is either to big, to small or wrong positioned or everything at the same time. I always had to deploy to device to see if it is correct.

On Mac it is better, but still kinda different.

And the difference between iOS and Android is small, but significant.

Is this the same with the native fonts?

I will test now if the ‘new’ font set will adjust better and if not if I can resolve it manually.

Best,

Felix

#7

On Windows, we uses Windows OS level system calls to take your text and spit back an image we can add to OpenGL. We are 100% at the mercy of the OS. Windows will render it the way Microsoft thinks is right. Apple will do things differently (even between OS X and iOS) and Android has it’s own way.

We can’t control this.

Rob

#8

Ok, I see.

In my experience OS X and iOS behave greatly the same, whereas windows and android are completely different.

Thanks for letting me know.

(I got not around to test the new fonts, will report back here as soon as I can)

Best,

Felix

#9

Just wanted to report back, that I cout solve my problem by resaving the font (ttf) via http://www.fontsquirrel.com. They autocorrect the offsets and now the Font shows completely.

Unfortunatly, schroederapps was right, and I have to undo all my offsets that I implemented to adjust for the cuttoff… But hei, there is always something, right?

Best,

Felix

#10

I’m not seeing any cutoff text.

#11

Hello Rob,

The second and the third button on the left side should be “Nähste Karten” and “Zufällige Karten”

But its written only Naheste and Zufallige (without the points on the “a”).

#12

Corona uses the operating system’s native font rendering. Each operating system renders fonts a little bit different. Each operating system also handles inconsistencies in fonts differently as well. When you get free fonts from the Internet instead of from well respected font foundries, they are full of issues in their metrics values and it can cause the text to be rendered differently.

You just have to try different fonts until you find one that the device you’re targeting renders correctly.

Rob

#13

@Felix, alternatively you can use font editing software to adjust the metrics on a font yourself - it’s a time consuming process and you risk fixing one thing only to break another (at least you do if you’re a relative novice at it like me), but it does work if you put in the time. I personally use Fontographer (it’s old but still works in El Capitan), but there are free ones out there such as fontforge (https://fontforge.github.io/en-US/). If you truly love that font, this can be a way of getting it to look right on-device.

#14

Hello Rob and schroederapps,

thank you very much for your responses.

I would love to stay with this font, especially because I donated for the designer to use it widely.

You are right, schroederapps, I could manually adjust the font metrics, I did this once, to add an accent. It took me hours but in the end I could do it, and now I found an updated version with the accent already added.

I will redownload it and see if this resolves the problem, maybe I am lucky…

But @Rob, This is a bigger problem than just finding a font that fits into all devices. Corona has some problem with fonts, or maybe with this font only, on the windows simulator almost every text is either to big, to small or wrong positioned or everything at the same time. I always had to deploy to device to see if it is correct.

On Mac it is better, but still kinda different.

And the difference between iOS and Android is small, but significant.

Is this the same with the native fonts?

I will test now if the ‘new’ font set will adjust better and if not if I can resolve it manually.

Best,

Felix

#15

On Windows, we uses Windows OS level system calls to take your text and spit back an image we can add to OpenGL. We are 100% at the mercy of the OS. Windows will render it the way Microsoft thinks is right. Apple will do things differently (even between OS X and iOS) and Android has it’s own way.

We can’t control this.

Rob

#16

Ok, I see.

In my experience OS X and iOS behave greatly the same, whereas windows and android are completely different.

Thanks for letting me know.

(I got not around to test the new fonts, will report back here as soon as I can)

Best,

Felix

#17

Just wanted to report back, that I cout solve my problem by resaving the font (ttf) via http://www.fontsquirrel.com. They autocorrect the offsets and now the Font shows completely.

Unfortunatly, schroederapps was right, and I have to undo all my offsets that I implemented to adjust for the cuttoff… But hei, there is always something, right?

Best,

Felix