TextField vertical alignment differs between bitmap font and ttf

[Lucker01]

Problem:
When using bitmap fonts, the TextField vertically aligns text slightly higher than True type fonts (see attached pic for sample output showing vertical alignments of Top, Center, and Bottom).

Sample code:
for center vert alignment (I created a test bitmap font (using Littera) of Verdana for the sake of comparing here):
var normalFont:TextField = new TextField(120, 30, "Hello world");
normalFont.format.setTo("Verdana", 12, 0x000000, Align.CENTER, Align.CENTER);
var bitmapFont:TextField = new TextField(120, 30, "Hello world");
bitmapFont.format.setTo("VerdanaTest", 12, 0x000000, Align.CENTER, Align.CENTER);

Issue versions:
It does this using 2.0.1 swc (and I have pulled the src from here today and tried with the same result)

Add'n info:
This is an issue for me when trying to make "slim" textfields (so the height of the textfield is just slightly larger than the text) because the bitmap font requires more space because of the extra bottom padding it appears to be adding. It is particularly noticeable when the textfield border = true.

[b005t3r]

I had similar issues with Starling 1.8 - bitmap fonts where never perfectly aligned and I had to add these micro adjustments to make them look good.

[PrimaryFeather]

Thanks for the report!
Quick question: what was the size you originally created the bitmap font with?

For best results, bitmap fonts should be displayed in the same size you defined on export; otherwise, some values I'm reading from the XML are simply not correct. For example, all xAdvance information is given in full pixels. When you scale a bitmap font to a different size, you will end up with fractional values, which reduces sharpness.

In a quick test, I could reproduce your findings, even though the difference is less severe. I will see if there's something I can do about it.

[PrimaryFeather]

Okay, after looking into it, I think the difference comes from the 2 pixel gutter that's added by Flash TextFields. It's mentioned in the documentation of the TextLineMetrics class.

My BitmapFont implementation does not add that gutter, and I'm unsure why it's there, in the first place. However, testing it, the results seem more similar to native TrueType rendering:

Left: Bitmap Font
Right: TrueType Font
(Type: Verdana, 12 pt)

However, I'm a little unsure about how to proceed. If I simply add this, a lot of users will suddenly have their text moved 2 points right and downwards — I don't think everybody will love that. 😉

What I'm considering is adding a property (gutter or padding?) to the BitmapFont class, so that people could configure this. The default would be 0, so that the behavior doesn't change. But by setting it to 2, you'd be closer to the native TextField output.

Opinions?

[Lucker01]

Thanks for identifying the source!
As a potential fix, I agree that just changing this to remove the 2px would impact lots of other users that have made "micro-adjustments" to work around the issue.

Adding an accessible gutter property would probably be appropriate solution.
Would this have to be set on each TextField object or a static property on the Class that applies to all TextFields?

[PrimaryFeather]

Thanks for your comments!

Would this have to be set on each TextField object or a static property on the Class that applies to all TextFields?

That would need to be set once per BitmapFont. If the BitmapFont is created by the AssetManager, you'd get it via TextField.getBitmapFont(). All TextFields updated after that change would automatically pick up that new setting.

[Lucker01]

Ahhhh, that would make sense.

One thought on default value:
Since it already seems to be adding a gutter of 2px, would it be more intuitive to users if the default value is 2? (wouldn't change existing behavior) And setting it to 0 would remove the gutter.

I know, a bit counter-intuitive for people like you actually coding Starling...but might make more sense to users? Just a thought...

[PrimaryFeather]

Since it already seems to be adding a gutter of 2px, would it be more intuitive to users if the default value is 2?

Ah, no, it doesn't add any gutter right now! The gutter I mentioned is only used by Flash's native TextField, and thus by Starling's TextField if it uses a TrueType font (since in that case, I'm simply rendering a native TextField into a Bitmap). A TextField that uses a BitmapFont doesn't have any gutter right now — and that's exactly why there's the difference to a TrueType TextField.

Thus, the default value on BitmapFont would be zero, and that means the appearance is unchanged.
With a value of 2, it would be more closer to the TrueType output.

[PrimaryFeather]

That should do it! 😄
Please try it out — with a value of 2, you should be much closer to the classic TrueType output now.

[Lucker01]

Thanks!
I tried the changes...but it doesn't seem to correct the reported issue.

Based on the previous behavior, this approach only corrects vAlign.TOP properly.
It doesn't seem to change the behavior of vAlign.CENTER.
vAlign.BOTTOM is now even higher that it was before (was already too high).

Would it help for you to have my generated fnt and png for the font?

[PrimaryFeather]

In that case, my guess is that the font data that's output by your tool is not the same I'm getting. I used "Glyph Designer" on the Mac, and got the following output (font size is '12'):

verdana.zip

Could you compare this with your files? Which tool have you been using? Did you export the font with a size of 12?

[Lucker01]

Yeah, yours looks much better! I have been using Littera's online bitmap font creator...perhaps I need to use a better tool to get more satisfactory results.
Thanks!

[PrimaryFeather]

Littera is definitely not a bad tool, but I guess there's some interpretation involved about how convert certain settings when creating the Bitmap font — thus, different tools will yield different results. Glyph Designer seems to be closer to what Flash does, apparently.

Perhaps you can ask the author of Littera to see if there's a way to fix that? In the Starling forum, his name is "Kvazar". You could send him a private message, he's very approachable! 😄