Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice

TextMesh Pro Line height differences if fallback font or not

Discussion in 'UGUI & TextMesh Pro' started by Democide, Apr 21, 2020.

  1. Democide

    Democide

    Joined:
    Jan 29, 2013
    Posts:
    315
    Alright, so I have the following setup:

    Two text mesh pros next to each other to create a table, one is left aligned with all the labels, one is right aligned with all the values. Then if the line breaks are consistent everything is aligned properly.

    However if I use a fallback font for the labels (chinese in this case) then the lines are no longer aligned.

    This happens even though the line height for the chinese font is the same as the default font (relative to their point size) and does not appear if the chinese font is used directly.

    To explain:

    Basic setup with default font
    upload_2020-4-21_15-34-29.png


    Chinese used as fallback font
    upload_2020-4-21_15-32-50.png

    Chinese font used directly
    upload_2020-4-21_15-33-25.png

    Anyone got an idea what causes it and how to fix this?
     
  2. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    The reason you are running into this is simply because the underlying fonts most likely have very difference font metrics where for instance, the Line Height, Ascent and Descent lines can be very different. This would most certainly affect line spacing and even character positioning.

    Fortunately, you can adjust these metrics in the font asset inspector to normalize these to make sure they work well together.

    In the image below, I added the TMP_TextInfoDebug.cs script to the text object to show these metrics. This script is included in the TMP Examples & Extras.

    upload_2020-4-21_12-35-31.png

    In the above image, the first "AB" is from LiberationSans and the second "AB" from NotoSansCJK.

    As you can see, these two fonts have very different metrics, especially when it comes to their Ascent Line and Descent Line. This would affect line spacing as well as vertical positioning of characters on individual lines.

    Line spacing is based on lowest Descender of previous line + line gap + highest Ascender of next line as you can see below.

    upload_2020-4-21_12-49-6.png

    In the image above, you can see how top alignment is based on the highest Ascender. Line spacing is from the lowest Descender + Line Gap (hard to see since it is small) + highest Ascender.

    In this next image, I adjusted the Ascent and Descent Line metrics of NotoSansCJK to match those of LiberationSans. Typically, you want to adjust the metrics of the fallbacks to match the primary as seen in the image below.

    upload_2020-4-21_12-52-28.png

    In this above image, the Ascent and Descent lines of NotoSansCJK have been adjusted which results in consistent vertical alignment and line spacing regardless of the text using LiberationSans and / or NotoSansCJK.

    Note: Font come in all shapes and size where these metrics are defined by whoever designed the font.
     
    Last edited: Apr 21, 2020
  3. Democide

    Democide

    Joined:
    Jan 29, 2013
    Posts:
    315
    Yeah, I figure it was something like that, but it was still weird, the right side is only the fallback font (except maybe the "(" or the line breaks - not sure).
     
  4. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,596
    Differences between fonts can be pretty significant. There was one font in particular that I ran into that at 36 point size was half the size of another with its baseline way up.

    Running into these wild fonts is one of the primary reason why I added the ability to edit the Face Metrics when I was trying to just create examples / demos of text objects using multiple fonts.