I’m using the widget library to create a button with a custom font, and I’m getting different results on the device as in the simulator. This wouldn’t really bother me too much, except for the fact that the text is getting clipped on the device.
Here’s what the button looks like in the simulator.
Here’s what it looks like on the device
Is there an easy solution to this? I’m creating the button just like suggested in the documentation.
Nobody?
Devices render fonts differently. I’ve usually found when I see this, it’s a problem with the font that the computer OS is handling differently than the device is. Consider a different font if possible and see if thats the problem. Maybe try taking the font size down a point or two as well.
The font is as low as possible without blurring. The thing is, it’s not like it’s rendering the font differently… it’s clipping 3 or so pixels off the top of the font. Is this really “normal” behavior for fonts? I ask, because I’m creating an app for a client and using this font is important to them, we can only change font as a last-measure solution.
If the device decides that the font baseline is 3 pixels higher than the computer OS does and that’s enough to push it outside of the box we are trying to fit into, you will get this problem.
I had the very same problem on a client app I was building. I changed the font to something similar and the problem cured itself. Can you do a few other tests? Does it happen with display.newText() or only with the widget.newButton(). There are some controls with widget.newButton that can move the position of the label up and down some.
http://docs.coronalabs.com/api/library/widget/newButton.html
Look at the labelYoffset value.
I’ll look into that. The font is displayed perfectly on all the newText() fields. It’s only happening on buttons. I’ll look into those docs.
Nobody?
Devices render fonts differently. I’ve usually found when I see this, it’s a problem with the font that the computer OS is handling differently than the device is. Consider a different font if possible and see if thats the problem. Maybe try taking the font size down a point or two as well.
The font is as low as possible without blurring. The thing is, it’s not like it’s rendering the font differently… it’s clipping 3 or so pixels off the top of the font. Is this really “normal” behavior for fonts? I ask, because I’m creating an app for a client and using this font is important to them, we can only change font as a last-measure solution.
If the device decides that the font baseline is 3 pixels higher than the computer OS does and that’s enough to push it outside of the box we are trying to fit into, you will get this problem.
I had the very same problem on a client app I was building. I changed the font to something similar and the problem cured itself. Can you do a few other tests? Does it happen with display.newText() or only with the widget.newButton(). There are some controls with widget.newButton that can move the position of the label up and down some.
http://docs.coronalabs.com/api/library/widget/newButton.html
Look at the labelYoffset value.
I’ll look into that. The font is displayed perfectly on all the newText() fields. It’s only happening on buttons. I’ll look into those docs.