Line Spacing is hard to use and not consistent with other softwares

General TouchDesigner Discussion
1

Hi there, I wanted to document some behaviors of Line Spacing in TouchDesigner as I didn’t find any in depth discussion of the behavior outside of the documentation. The behavior in TD does not match the typical behavior of line spacing in other software which makes it cumbersome to do typesetting.

Line-height, line spacing, and leading are all synonymous in the context of digital design software and are defined as:

Leading (or line height) is the vertical distance between lines of text. More precisely, the distance between their baselines (from one line’s baseline to the following line’s baseline). In simple words, it is line spacing familiar to almost everybody.
Source

ezgif-2-0999e9365c
ezgif-2-0999e9365c1200×467 40.6 KB

I’ve made a file with a few examples to try and document how Line Spacing functions in TD and compare it to line-height in CSS. CSS mimics how line spacing works in design software (for the most part) so that was an easy way to compare.

Examples C1 and C2

These confirm the behavior of Line Spacing on a Text TOP being

Determines the amount of space between lines of text.

When the Line Spacing parameter on the Text TOP is 0 the line spacing comes out to be 1.072 (107.2%) which you can see in example C2.

Examples A1 and A2

These compare Text TOP to how the web renders text. A1 uses Verdana and A2 uses Arial. Verdana needs a -3px Line Spacing to match 40px line-height in CSS (which is the same 1.072 value seen in example C2) and Arial needs -3.576px Line Spacing.

Example B

This example shows the behavior of the Text OP. It needs a Line Spacing of 0.831 to match line-height 1 in CSS.

Summary

I’d be curious if there is any further info around how line spacing is handled in TD. None of the above examples are bugs but they do make doing typesetting in TD cumbersome and requiring a lot of trial and error. I also filed a bug around Line Spacing units here. I have a bunch of TD programs that do dynamic text layouts and it’s hard to make them scale nicely without the line spacing getting out of whack.

Thanks!

LineSpacingTest.toe (10.4 KB)

3

Thanks for the detailed analysis. As you can tell, the Text TOP and Text COMP use different layout systems internally so they do operate a little differently. The Text COMP is the newer system that we are trying to shift everything towards and relies on the Slug font library internally to do the layout work. You can read all of the details on it here if you want: Slug Library Manual Line spacing is referred to as leading in the docs for reference.

I’m still digging into the older Text TOP code to give you a better explanation, but as far as the Text COMP is concerned we are using Slug’s recommended line spacing of 1.2 * font size as the default spacing which is equivalent to 1.0 in the parameter. When you set the spacing in CSS to match the font size, this is equivalent to 1 / 1.2 or 0.833 as you discovered. I will update our documentation to make this clearer.

I’ll give you an update on the Text TOP behaviour shortly.

1 Like
4

So the older system in the Text TOP goes through a few more steps, so I’m not sure I can break down all of the math here. However, as you noted it works as an addition to the default line spacing which is taken from the LineGap metric inside the font file and expressed internally as a multiplier of the font size. For reference, the LineGap for Verdana seems to be 1.31510425

I hope that helps. I have now fixed the line spacing unit bug you mentioned in the other thread and I’ve also created an internal RFE to potentially add a unit menu to the Text COMP spacing parameter so that you can specify that in more standard units like CSS.

1 Like
6

Great, thanks @robmc!