TextMesh Pro Font specified in Style tag not respecting correct font asset line height

Hey Stephan, firstly thanks for your dedication to this brilliant plugin!

I've encountered a strange issue...

I have multiple font assets and I'm using the Style Sheet to define styles like so:

<size=78.75><font="HelveticaNeue-Bold SDF"><line-height=94.5e>

Firstly, is specifying a line-height with "e" correct? It seems to work as a multiplier value of the Font Asset defined line height, which is what I want...

Ok the real issue; the line height of the rendered text seems to be always based on the Font Asset that's selected in the inspector of the TMP UGUI. So even though a different font is specified in the Style tag above, the line height doesn't change when the specified Font Asset line height is changed, it only changes when the inspector selected Font Asset is changed.

Am I doing something wrong?

Thanks!

 

I will try to take a look later tonight and provide some feedback thereafter.

 

The proper format would be <line-height=94.5em> where "em" stands for font units. If the current point size is 36 then 1em = 36. So 2em would double the point size or line height. Therefore in your example, if the font size is 78.75, you would be adding a line height equal to 94.5 times the original which is massive and likely to result in the next line being off screen somewhere.

In terms of the line height being applied based on the font assigned to the text object, that is not accurate. The line height is based on whatever font is current active. Here are two examples.

On the left, we have the following text: "A<line-height=2em><font="Anton SDF">B". Given the line height is changed before switching font, the line height will be 2em of 2x of the normal line height of the primary font asset assigned to the text object.

On the right, we have "A<font="Anton SDF"><line-height=2em>B". Now in this case, the line height will be 2em or 2x of the line height of this new Anton SDF font.

Therefore, the <line-height=x.xx" applies / modified the line height of whatever the currently active font is in the text sequence.



FYI: The <line-height> tag like many other tags can be specified as "px" pixel units, "em" font units and "%" percentage. See the following docs.

 

Hi Stephan,

Thank you so much for your time on this.

My understanding of how the line-height is applied was wrong.

So the line height in 'em' is a multiple of the Point Size of the Font Asset.

Is it possible to have the Line Height that's specified in the Font Asset have the same effect on fonts declared in line? This attribute of the Font Asset is ignored for inline font declarations.

I've taken a short screen grab: https://www.dropbox.com/s/bdpn5bbn1woq6lf/TMP Line Heights.webm?dl=0

I have a design guide I need to follow that specifies quite detailed line heights for different situations. So I've taken to declaring the Font Asset line height as around 1 and then using <line-height=30em>. I then change the Font Asset line height until the output from TMPro looks the same as the output from Photoshop.

e.g.

Title = <size=78.75><font="HelveticaNeue-Bold SDF"><line-height=94.5em>
</line-height></font></size>

Body = <size=42><font="HelveticaNeue-Light SDF"><line-height=50.4em>
</line-height></font></size>

Previously I would apply fonts and line heights directly on the TMP GUI in runtime but I wanted to use style sheets as a cleaner way of managing things. Applying all the attributes on the TMP GUI works as expected, the Line Height of the Font Asset is taken into consideration.

If there is a different approach I should be using then I'm really sorry for taking up your time...

Thanks!

 

I think I'm approaching this in completely the wrong way. I should be using pixel units for the line heights, not font units.

Also, if each font asset has the same Point Size when you create the Font Asset then the above won't matter.

However, when using pixel units inline for line height, the Font Asset Line Height no longer affects the rendered line height.
When setting the Line Height in the TMP GUI directly, the Font Asset Line Height does affect the rendered line height.

 

Correct. Furthermore, you have to consider that it is applied based on whatever the currently active font asset and point size is. So if you are using the <size> tag or <font> tags, these will be affecting what the results are.

For example, if the raw text is "Hello <size=2em>World", then assuming the initial point size was 36, the word "World" would end up at 72 point size.

If the line height is set at the start of a block of text, it should remain consistent and unaffected by changing fonts or even point size.

You can see in the example below that the line height (second line) is affect by the font change on the word "simple". By default line height is from lowest descender of previous line + line gap to the highest Ascender of subsequent line.



Now in this next example, you can see how the line height is unaffected by the font and size change and based on the font and size at the time it was applied.



So based on how you were doing it per blocks, should work. I will check as the application of this block of tags whether inline in the text or coming from a style should be the same.

Again, you have a choice of using (px) pixel units, (em) font units, or (%) percentage.

Unfortunately, not all fonts are created equal and since scaling / size of characters, line height, etc. is all up to whoever designed the source font file, you most of the time end up with fonts of the same point size having very different metrics. The worst I have seen was 2X relative to each other with a by shift in the baseline position.

Fortunately, in the font asset inspector, you can actually change the relative scaling of a font asset, ascender, descender, baseline and line height to essentially normalize this font asset so they blend in better with each other.

 

Can you provide an example of those just so I understand correctly?

 

I think what you're saying is that the line height is taken from the beginning of the text and then remains consistent throughout the rest of the text, regardless of what a Font Asset line height is set to that is declared later on in the text. I understand why this is necessary from your above example, thank you.

It seems to take this initial line height for the whole text based on the Font Asset specified in the TMP GUI though and you can't seem to override this with an inline font declaration, even if this is the first thing in the text. Again I can see why this makes sense, it just means I will have to go back to declaring my fonts directly in the TMP GUI via code, which means the stylesheets won't be useful for me...

Sure: https://www.dropbox.com/s/zfitdb32mgt6zk6/TMP Pixel Line Heights.webm?dl=0

To me, it seems like an inline line-height declaration would work the same as the line height option in the TMP GUI, but the TMP GUI option takes the Font Asset line height into account, whereas the inline line-height declaration doesn't. Maybe there is a setting or checkbox I'm missing somewhere, or this is intended.

For my font set, which consists of a light, regular and bold version, I have now set the Font Size manually in the Font Asset Creator so it's the same in all three versions. I think this is a good idea generally for consistency but I might be wrong. If the Font Asset Point Size is the same for all three versions and the other attributes are matched (ascender etc.) then the line heights of each font are pretty much identical, which is good and might solve my problems, except for the inline line height issue in the video above.


Just for some clarity - my end goal is to take a set of font specifications like this:

Title

• Bold
• Size 46
• Line Height 49

Prompt

• Regular
• Size 28
• Line Height 34

Body

• Light
• Size 25
• Line Height 30

and set these up in a stylesheet like this:

Title

<size=46><font="HelveticaNeue-Bold SDF"><line-height=49>
</line-height></font></size>​

Prompt

<size=28><font="HelveticaNeue-Bold SDF"><line-height=34>
</line-height></font></size>​

Body

<size=25><font="HelveticaNeue-Bold SDF"><line-height=30>
</line-height></font></size>​

Thanks again for spending time on this!

 

Typos in my stylesheet examples, won't let me edit it now...

Title

<size=46><font="HelveticaNeue-Bold SDF"><line-height=49>
</line-height></font></size>​

Prompt

<size=28><font="HelveticaNeue SDF"><line-height=34>
</line-height></font></size>​

Body

<size=25><font="HelveticaNeue-Light SDF"><line-height=30>
</line-height></font></size>​

 

Correct. So whenever the <line-height> tag is encountered at that point it uses whatever the font and other relevant attributes as the basis for changing the line height.

The Line field in the text object Inspector is a global modifier and applies to the whole text. This adjustment is incremental and not absolute. It is relative to point size and basically a % percentage added to the current line height.

As long as you are using the same source font file or font family and the sampling point size is the same (which you can control when creating the font assets by using Manual instead of Auto) normalizing the line height should work fine.

I would suggest you add the TMP_TextInfoDebugTool.cs script to a TextMeshPro object as this will allow you to visualize those font metrics and actually see the Ascender, Decender of each line and see how this word wrapping / new line works.

In terms of the behavior you are reporting, again the Line field in the Inspector is global and in addition to whatever the currently line height is. It is not an absolute value. It increases or decreases line height.

I will look at you style tags to make sure they appear to work as expected and provide additional feedback thereafter.