Search Unity

TextMesh Pro Outline Thickness

Discussion in 'UGUI & TextMesh Pro' started by JasonAppxplore, Jul 18, 2019.

  1. JasonAppxplore

    JasonAppxplore

    Joined:
    Jan 14, 2015
    Posts:
    18
    How is it calculated? In relation to the sampling text size or the padding? Our UI designer and programmer is having trouble communicating how thick the outline should be, so I'm trying to understand how the outline works.
     
  2. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    The Outline thickness is relative to the ratio of Sampling Point Size to Padding.

    For example, if the sampling point size is 100 and padding 10 for a ratio of 10% and assuming a glyph is 100 pixels wide, the outline thickness when using a value of 0.5 would be about 5 pixels inside and about 5 pixels outside for a total of about 10%.

    The following glyph was sampled at 100 point size with padding of 10.

    This glyph is displayed at 100 point size or 1:1.

    The glyph is 86 pixels wide with Dilation of 0 which means the outline is applied at the edge and spreads an equal amount inside and outside. The outline thickness value is 0.5. The outline is about 10 pixels or about 10%.

    upload_2019-7-18_0-51-29.png

    Setting Dilation to a value of 0.5 shifts the outline to the outside where the outline thickness is still about 10 pixels or 10%.

    upload_2019-7-18_0-52-47.png

    Setting Dilation to -0.5 shifts the outline to the inside where the outline remains about the same 10 pixels wide but now all on the inside.

    upload_2019-7-18_0-53-54.png

    This is the glyph with no dilation or outline.

    upload_2019-7-18_0-54-40.png

    I realize these values are approximations. The about 10 pixels above is closer to 9 due to internal truncating of the range to ensure bold text which uses dilation renders correctly.

    As a general rule, if the ratio of sampling point size to padding is 10% then you can expect the outline to be about 10% at a value of 0.5.

    At a value of 1.0, the outline would be 10% inside and 10% outside but at these maximum values, the ranges will end up being truncated again with large negative dilation values. This is due to internal ratio to make sure the material render correctly. In other words, don't use maximum ranges. If you need thicker outlines, then increase the ratio of sampling point size to padding.

    P.S. When I have time, I can see if I can come up with a simpler way to represent / express these values or unless someone else has the time ;)
     
    Last edited: Jul 18, 2019
    KalyanKP likes this.
  3. JasonAppxplore

    JasonAppxplore

    Joined:
    Jan 14, 2015
    Posts:
    18
    Sorry there are so many 10s I'm getting a little confused here.

    If it is relative to the ratio, then for a font with 10% ratio (regardless of sampling point size and padding) with outline value of 0.5, the outline thickness will always be 5 pixels inside and 5 pixels outside, when the glyph is displayed at 1:1 point size. Is that correct?

    Or maybe I should ask : About 10% of the sampling point size or ...?
     
  4. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    The thickness will remain consistent for any given sampling point size and padding value provided the ratio remains the same.

    As such using the same font file, if Font Asset 1 is sampled at 100 with padding of 10 and Font Asset 2 is sampled at 50 with padding of 5 where both have an outline of 0.5 and the point size on the text object is 100 then their outline will be the same thickness at about 5 pixels inside and 5 pixels outside.

    If the point size on the text object is reduced to 50 then the outline thickness at the same value of 0.5 will be half or about 5 pixels combined for the inside and outside.

    I guess at a sampling point size to padding ratio of 10%, the outline thickness at 0.5 will be half of the 10% which is 5% or 5 pixels on the inside and 5% or 5 pixels on the outside if the point size of the text object is 100.

    Text Point Size * Ratio * Outline value = pixels (inside and outside)
    100 pts * 10% ratio * 0.5 outline = 5 pixels inside and 5 pixels outside.
    50 pts * 10% ratio * 0.5 outline = about 2.5 pixels inside and 2.5 pixels outside.

    I suggest testing the above but that should be pretty close.
     
    Last edited: Jul 18, 2019
  5. JasonAppxplore

    JasonAppxplore

    Joined:
    Jan 14, 2015
    Posts:
    18
    I see. This made it very clear. I went ahead and tested it and it seems correct.
     
    Stephan_B likes this.