Font Vertical Alignment in Text Boxes with Custom Fonts


#1


As you can see, this font does not behave correctly in a TextBox. This font seems to show no indication of issues elsewhere. I have manipulated this font’s metadata to have it force include bounding box parameters, and disclude. Setting this parameter does not seem to make a difference to your program. I assume it is calculating the ascent, baseline, and height. I changed an existing character in the font, to a line that spanned from ascent to descent. Your program wouldn’t recognize the new font, but I can see this new font perfect, and it behaves correctly, in Windows, and Word. Not sure what to do to get this item to display correctly. Font is all over the internet. It is called: Vermin Vibes 4 Helium
…and one location for download is here: https://www.dafont.com/vermin-vibes-4-helium.font


#2

How about you add an arrangement at the top, as a padding with a height of 10 px?


#3

Thanks for the response. I’m sorry… I should have been more clear with what this error entails.


The issue lies in the way the fonts are interpreted in Appybuilder(and Thunkable). This font, for some reason, isn’t aligning vertically correctly. I think it may have something to do with it being an all cap font (Aa=AA(no descent characters, few extra characters to calculate a reference to a larger span)). I have worked out a fix around this error, by duplicating the font, manipulating it’s metadata contents and creating a character that spans ascent to descent, fooling the calculated size reference. I have to upload a duplicate font for every font loaded (with this error), but they are small in size so it worked out for now. Still, it would be nice to have it work correctly.


#4

@bootiehandler i don’t really have experience with creating custom fonts. Isn’t this really a font issue? Like you said, if they are all caps, then there is no descend


#5

I don’t know if this is only a font issue or also that appybuilder and thunkable are using the device’s default material theme.

Using light or dark material theme may look like this,
light material theme
New photo by Boban Stojmenovic

with device default material theme
New photo by Boban Stojmenovic


#6

@Boban_Stojmenovic for first image, you manually updated manifest and for second one is the exact apk generated by AppyBuilder?


#7

That’s correct @Hossein.


#8

@Boban_Stojmenovic can you send me manifest BEFORE and AFTER. Update?


#9

I only inherit Theme.Material.Light in my own theme.


#10

@Boban_Stojmenovic @bootiehandler How does this look?


#11

You may be correct, I have made it past this issue for my project, so I may never know. I hope no one closes this bug out thinking it is fixed just because I no longer have this error impeding my project. Anyway, it seems that when importing other fonts with a full spectrum of characters, I do not have this same issue. Ex: With other full spectrum fonts, I see a 7 pixel ascent with a size 14 font. With the ‘all caps font’, a 2 pixel ascent with a size 14 font. When I manipulated the font, it appears to space ascent correctly. I believe, in this situation, the font is the culprit exposing this bug, and the bug is in the way font sizes are interpreted.


#12

Thank you. That was a bit of effort on your part and I do appreciate it. Sorry I did not respond as quickly as I normally would as it took a bit of time to, even understand what is going on with your suggestion, to form an answer. Now I think I got it. That is fantastic ‘thinking outside the box’.


#13

Looks great Hossein!!! My method of modifying the font left the text, correctly centered vertically, but reserved quite a bit of space above (17px) and below (17px) the font on a 23px high font. I believe that your and Boban’s efforts will yield what I require. I assume this is the ‘alter manifest’ direction from above. Since you are TS, I will ask you first before I go bugging Boban. Is there a way to select a different theme, from the front end, without having to export the APK and modify it?


#14

At the moment this is an option: Android Theme Extension


#15