Author Topic: Understanding Spacing Options  (Read 86 times)

dmcondolora

  • Newbie
  • *
  • Posts: 24
Understanding Spacing Options
« on: August 23, 2018, 08:03:35 AM »
I'm using TextMesh Pro 1.3, installed from the Package Manager in Unity 2018.2.3f1.

For some time now, I've been trying to understanding how TextMesh Pro's spacing settings compare to those found in graphic design software, specifically Bohemian Coding's Sketch.

I have the following text box in Sketch:

[ Guests cannot view attachments ]

I've reconstructed it in Unity with TextMesh Pro, using an SDF font generated from the same TTF used in Sketch (LFT Etica Sheriff Italic):

[ Guests cannot view attachments ]

However, if I adjust the TextMesh Spacing Options to match those in Sketch (character spacing of .25, line spacing of 110), the text is mismatched, with lines running longer and the spacing between lines dramatically different:

[ Guests cannot view attachments ]

The game I'm working on depends heavily on text boxes and accurate alignment, so I'm trying to understand how to ensure that I can exactly mimic my artists layouts. How are the spacing options calculated? Are there standards for how character, line, and paragraph spacing work?

Thank you!

- David
« Last Edit: August 23, 2018, 08:08:50 AM by dmcondolora »

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5617
Re: Understanding Spacing Options
« Reply #1 on: August 24, 2018, 02:02:22 AM »
I am not familiar with Sketch so I don't know how their spacing options would match those in TextMesh Pro.

The spacing options in TextMesh Pro increase or decrease the character, line or paragraph spacing. These values are in point units.

For instance, assuming a text object whose scale is (1, 1, 1) using a font asset with a sampling point size of 90 using a point size of 90 (1:1 ratio) then each spacing unit would end up being 1 pixel on the Canvas (provided no scaling of the Canvas). If the text contained a letter whose width was 40, then it would be 40 pixels wide. Ie. everything is 1:1. The same would hold true if using a normal <TextMeshPro> with an orthographic camera properly scaled.

As the point size on the text object changes, everything scales accordingly so the same character at 45 point size would be 20 pixels wide.

Again all these values are in point units. These scale and remain consistent as the point size of the text object changes.

For instance, if the Line Height of a font asset is 100, then using Line Spacing of 100 will double the line spacing.

P.S. In your example image, you are using a point size of 0.64 which is too small. Consider changing the scaling on those object to use more realistic point sizes. Super small text / tiny text should be about 8 to 10 point size. Using proper point size is important as text auto sizing precision is 0.05 and when using 0.64, text won't get auto sized correctly.

You can also turn off that Orange highlight in the Gizmos panel at the top right of the scene view which I always do to make it easier to look at the text itself.

dmcondolora

  • Newbie
  • *
  • Posts: 24
Re: Understanding Spacing Options
« Reply #2 on: August 24, 2018, 06:50:33 AM »
Hi Stephan,

Thanks for the fast reply and always-excellent support!

The spacing options in TextMesh Pro increase or decrease the character, line or paragraph spacing. These values are in point units.

For instance, assuming a text object whose scale is (1, 1, 1) using a font asset with a sampling point size of 90 using a point size of 90 (1:1 ratio) then each spacing unit would end up being 1 pixel on the Canvas (provided no scaling of the Canvas). If the text contained a letter whose width was 40, then it would be 40 pixels wide. Ie. everything is 1:1.

I guess my question then is, is this the way graphic arts software approaches the same task? I understand that Sketch may not be the best reference, so here's the same test done in Adobe Photoshop:

[ Guests cannot view attachments ]

I shifted the Photoshop text to the left so you can see how clearly they line up using the same text box and spacing settings.

In case it's helpful, here is my TMP font asset:

[ Guests cannot view attachments ]

I think what I'm discovering here is that in order to match graphic art software line spacing, I need to subtract the font asset's line height. e.g. to arrive at what Sketch/Photoshop would consider line spacing of 110, in TMP I would use 110 - 45.625, for a TMP line spacing of 64.375. I tried this, and it works (as long as I'm using a font size of 64 and not a decimal value), but I wonder if there's a way to get TMP to more intuitively match text boxes in graphic arts software.

In your example image, you are using a point size of 0.64 which is too small. Consider changing the scaling on those object to use more realistic point sizes.

I'm using a TextMesh Pro component (not UI) with "Orthographic Mode" checked, and my Unity project is setup for 100 px = 1 unit. If I set the font size to 64, the text is incredibly large. Not sure how best to adjust this except by either scaling the text's transform or lowering the font size. I don't think I want to change my project to 1 px = 1 unit for Unity precision reasons.

You can also turn off that Orange highlight in the Gizmos panel at the top right of the scene view which I always do to make it easier to look at the text itself.

Thanks for this tip! Much easier to see what I'm doing.
« Last Edit: August 24, 2018, 07:05:01 AM by dmcondolora »

dmcondolora

  • Newbie
  • *
  • Posts: 24
Re: Understanding Spacing Options
« Reply #3 on: September 04, 2018, 01:54:28 PM »
Bumping this, as it's been a couple of weeks.

Two questions:

1. If using Unity scale of 1 unit = 100 px (or points), what's the best way to set up TMP so that I'm not having to use decimal font values?

2. Any comments on how TMP approaches line height, etc vs how Photoshop and other graphics arts software do the same thing?

Thanks!

- David

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5617
Re: Understanding Spacing Options
« Reply #4 on: September 05, 2018, 03:37:51 PM »
1. If using Unity scale of 1 unit = 100 px (or points), what's the best way to set up TMP so that I'm not having to use decimal font values?

The size of the orthographic camera has to be set correctly.

The Orthographic Mode has the affect of making the text 10x larger. So disabling that should get you into more realistic value ranges for point sizes.

Outside of that, I think using some uniform scaling on the objects is most likely the best way.

2. Any comments on how TMP approaches line height, etc vs how Photoshop and other graphics arts software do the same thing?

Line height is based on whatever the font / font asset has defined for line height.

Are you seeing inconsistencies here?

dmcondolora

  • Newbie
  • *
  • Posts: 24
Re: Understanding Spacing Options
« Reply #5 on: September 11, 2018, 02:49:18 PM »
Thanks for the reply!

The size of the orthographic camera has to be set correctly.

The Orthographic Mode has the affect of making the text 10x larger. So disabling that should get you into more realistic value ranges for point sizes.

Outside of that, I think using some uniform scaling on the objects is most likely the best way.

Good to know that Orthographic Mode is essentially a 10x switch. That gets me up to 6.4 instead .64, which is an improvement. Regarding orthographic size of the camera, using any single-digit values (such as what Unity defaults to) will result in needing to either use very small font sizes, or scaling text objects. I'm not really a fan of either, but I think I'd rather use small font sizes as long as it doesn't mess up TMP.

Line height is based on whatever the font / font asset has defined for line height.

Are you seeing inconsistencies here?

The inconsistency I'm seeing is how TMP handles line height versus graphic arts software:

Quote from: dmcondolora
in order to match graphic art software line spacing, I need to subtract the font asset's line height. e.g. to arrive at what Sketch/Photoshop would consider line spacing of 110, in TMP I would use line spacing of 110 - 45.625 (my font asset's line height), for a TMP line spacing of 64.375. I tried this, and it works (as long as I'm using a font size of 64 and not a decimal value), but I wonder if there's a way to get TMP to more intuitively match text boxes in graphic arts software.

Also, the line height of the SDF font asset seems dependent on the font asset's point size. So it's potentially a moving target. Additionally, I've noticed that in order to get the behavior I'm looking for, I need to manually edit the font asset so that Ascender matches Line Height; otherwise the first line of a paragraph will be spaced incorrectly.

I understand that TMP is a different tool in a different engine, but given that the Spacing Options mimic those found in Photoshop/Illustrator/etc, it would be much more intuitive if they behaved the same way. It helps that I now have an idea of the math I can do to make them match, but I don't really think that math should be necessary.

Thanks for your help!

- David

Stephan B.

  • Administrator
  • Hero Member
  • *****
  • Posts: 5617
Re: Understanding Spacing Options
« Reply #6 on: September 11, 2018, 10:23:23 PM »
With regards to the Camera size and although a user can change such size, in order to get 1:1 rendering, the size of an orthographic camera should be vertical height / 20. So if the vertical resolution is 720 then the camera size should be 36.

In terms of line height, the values are relative to the sampling point size which are based on whatever line height the font design choose.

Line height = Ascender - Descender + line gap. This is what TMP is using and how it is supposed to be handled. Line height is also the distance from baseline to baseline of separate lines of text.

The top of the first line is based on the Ascender which will vary from font to font. Changing the Ascender will change the position of the first line if top aligned however, that will not change line height.

dmcondolora

  • Newbie
  • *
  • Posts: 24
Re: Understanding Spacing Options
« Reply #7 on: September 12, 2018, 06:44:04 AM »
in order to get 1:1 rendering, the size of an orthographic camera should be vertical height / 20. So if the vertical resolution is 720 then the camera size should be 36.

Wow, that's interesting. Is there some documentation somewhere where I can read more on this? I've been using 1 unit = 100 px, making my orthographic size (vertical resolution / 2) / 100. 1 unit = 100 px seems to be standard, as far as I can tell.

In terms of line height, the values are relative to the sampling point size which are based on whatever line height the font design choose.

Line height = Ascender - Descender + line gap. This is what TMP is using and how it is supposed to be handled. Line height is also the distance from baseline to baseline of separate lines of text.

That all sounds right. I think what I'm seeing now is that TMP is handling the spacing options properly in the component, but the SDF asset properties are not the same as the font properties would be in graphic arts software, which is why I need to perform a calculation to get similar line/character spacing in TMP.

The top of the first line is based on the Ascender which will vary from font to font. Changing the Ascender will change the position of the first line if top aligned however, that will not change line height.

Yep, that's exactly what I was seeing, but didn't articulate well. In order for top align to work correctly, I needed to change the Ascender to match Line Height in the SDF asset.

Now that I know how it all works, I can handle this. Thanks for taking the time to explain it.

If I could make a feature request, it would be to make this process more intuitive/invisible to TMP users. I went in expecting that the spacing options in a TMP component would work like the graphic arts software they mimic, and it turns out they do, but the values are dependent on the SDF asset. It would be great if these calculations were handled behind the scenes, or were otherwise hidden from the user so that spacing values were 1:1 with graphic arts software. It would greatly aid communication with artists and accuracy in implementation.

Thanks as always for your time and thorough support!

- David