Bug TMP Font not centering

Hi,

I am sure this is a bug, but I wanted to be sure.

I have a font that isn't centered on the label in UITK or UGUI. (It isn't a uss centering issue). I made the font into a UITK font asset. I posted the font and font asset in a zip.



It centers correctly with the default font:



Is this a bug or am I doing something wrong?

I tried adjusting the baseline in the asset file, but it won't work if the label has a set height. It will be different between set height labels and labels that are on auto expand.

Thanks!

 

By not centered, you mean vertically. Correct?

Text is aligned based on the font metrics which are defined by the font designer. In most cases, designers do a good job but in other cases, they can take creative liberties which results in interesting alignment.

Below is an image using the default font Inter with middle vertical alignment which aligns the text based on the max Ascent Line to min Descent line.



As you can see, the gap between the top of the RectTransform (yellow line) and the Ascent Line is the same as the bottom of the RectTransform and Descent Line.

Below is the same text using the JoseinSans font file you provided.



As you can see, the gap between top and bottom of the RectTransform relative to the Ascent and Descent Line is the same confirming the middle alignment is correct based on the metrics of this font file.

Looking closer at the metrics of JosefinSans, you can see the Cap Line which is typically placed at the top of uppercase letter like "S" is correct. However, the position of the Ascent Line is pretty low and actually below some of the ascent of lowercase letters like "l". This results in this font's alignment being shifted upward thus resulting in the appearance of being misaligned which from a technical stand point it is not but from a visual stand point is.

Assuming you want to continue to use this font, you can adjust the Ascent Line of the font asset via the Font Asset Inspector as I have done below where I increased the Ascent Line to move it up to get the desired vertical alignment.



As seen above, the text is technically better aligned vertically between the top ascent of the letter "l" and descent of "y" relative to the RectTransform. However, this doesn't mean it is better aligned from a style and design point of view as I am sure the designer of this font had a reason to set the Ascent Line so close to the Cap line.

Furthermore, the above text appears better align because we adjusted the metrics such as the gap between the bottom "y" and top of "l" is about the same. However, what happens if the text does not contain a descender?



Now, our text doesn't appear as well aligned as now once again, the text appear to be too high but that is only because we don't have a descender in the word "Steak!".

As you can see these design metrics are very subjective and a reflection of the designers vision / goals for the font. The original metrics are neither right or wrong. They are again just a reflection of a design decision on the part of the designer.

How a single character, word or whole block of text may appear aligned in a shape or page can also vary greatly and this is why TMP offers different vertical alignment modes like Middle, Baseline, Midline and Capline where these use different metrics to align the text vertically.

I made a few posts about these different alignment modes in the past, I suggest you look those up as each of the alignment options have their purpose.

UI Toolkit may not currently expose all these alignment options but they will be added soon.

 

Wow, thank you for the very best information! It really helps and I am sure will help others!!

 

Hey!

It has been a few months. I have downloaded Beta 1 for 2021. I don't see these options yet. I was wondering if they are on the schedule to come out soon?

Also wondering if line spacing is coming soon? This seems to be missing. There is letter/world/paragraph spacing but not line.

Thanks!

 

The latest version of TMP for Unity 2021 is version 3.0.6.

The next release which is expected to be version 3.2.0-preview.1 for Unity 2020.x should be available within the next 15 to 30 days.

 

Thanks for the confirmation!

 

Sorry to come back to this

I downloaded 3.2.0-preview.1, but I don't see the features. Did they not make it into the build?

1. Line Spacing. It doesn't work in USS or UIBuilder.



2. The alternative centering of a font. Here is the TMP object.


Here is UIBuilder.



Am I missing something?

Thanks!

 

The TextMeshPro package and components are distinct from UI Toolkit and UI Builder. Ie. Upgrading the TMP package only affects TMP.

UI Toolkit uses TextCore which provides similar functionality to TMP. However, not all functionality is currently exposed in UI Toolkit and UI Builder such as some of the text alignment modes, etc.

I know the UI Toolkit team plans on exposing more of the text functionality available TextCore but I don't know the specifics of their roadmap in that regard.