tag:support.nodebox.net,2012-11-01:/discussions/nodebox-2-3/5631-line-spacing-line-heightNodeBox: Discussion 2018-12-30T18:24:57Ztag:support.nodebox.net,2012-11-01:Comment/383644912015-11-03T11:12:36Z2018-12-30T18:24:57Zline spacing, line height<div><p>Hello NodeBox Community,</p>
<p>is there any possibilty to influence the line spacing of a text-on-path-Node.<br>
As I change the fonts in that Node, the line-spacing changes extremely.<br>
Attached two screenshots with ArialMT and Arial-Black.</p>
<p>Thanks for any help.<br>
Philipp</p></div>ppapetag:support.nodebox.net,2012-11-01:Comment/383644912015-11-05T00:29:51Z2015-11-05T00:29:51Zline spacing, line height<div><p>Dear Phillip,</p>
<p>Good question! The textpath node really should have a leading
(line spacing) parameter. I suspect this would be easy for the team
to add, so I will officially make this a feature request.
Frederick?</p>
<p>But until this feature is added to some future release is there
any way we could influence the leading ourselves?</p>
<p>At first glance the answer would seem to be no. The textpath
node produces a single SVG path (a list of line segments and
curves). All font and spacing information is lost; all we have is
the path. We can fit that path to different heights or scale it,
but that would distort the letters along with everything else.</p>
<p>But we can attempt to breakup and reassemble the path. I found
this to be an irresistible challenge and came up with a subnetwork
(AdjustLeading) that works pretty well most of the time. A
demonstration network is attached along with a screenshot.</p>
<p>My approach was to create a grid of rectangles surrounding each
line of the text, isolate them into separate paths using the
compound node, and then use a stretchable 1-column grid to adjust
the leading.</p>
<p>To do this I needed two key pieces of information, the font
height and the number of lines in the original textpath output.
Font height is usually (but not always) equal to font size; I saw
no easy way to determine it automatically so added it as a
parameter.</p>
<p>It’s easy for humans to count the number of lines, but
hard to deduce it from the raw path data. I made a sub-subnetwork
(lineCount) that reduces the path to a list of points and looks for
a pair of successive x-coordinates with a big leftward swing. For
"big" I used a fudge factor (swing > half the font height). I
tested it on many different fonts and sizes, and it works most of
the time.</p>
<p>This approach will fail for fonts with dramatic ascenders and
descenders that also have tight default leadings. These fonts (e.g.
Zapfino) are designed so that the tops of some letters will
intertwine with the bottoms of others; in such cases I can’t
extract each line cleanly.</p>
<p>But for your case and many others, the AdjustLeading node will
work nicely. Just feed in the output of your textpath node, create
a number node to set the font height (you could feed that node into
both the textpath and AdjustLeading nodes to easily try out
different font sizes), and set the desired leading. A value of 0
leaves the text unchanged; negative values tighten the leading and
positive values expand it.</p>
<p>AdjustLeading doesn’t change the position of the text, but
for the demo network I used a translate node so that you could see
before and after side by side (with an ArialMT version on the left
for comparison).</p>
<p>Please give it a try and see if it works for you.</p>
<p>(If it doesn’t, an alternative would be to do the complete
layout yourself. You could do this by breaking the text into
individual letters and use Nodebox to kern the letters, determine
line breaks, and change the leading. This would take a bit of work
but would give you full control.)</p>
<p>Thanks for an interesting challenge!</p>
<p>John</p></div>johntag:support.nodebox.net,2012-11-01:Comment/383644912015-11-19T01:49:00Z2015-11-19T01:49:00Zline spacing, line height<div><p>Just for fun I hooked a sine wave node into my AdjustLeading
subnetwork and voila: bouncing text.</p>
<p>Movie attached. For best results set it to loop.</p>
<p>John</p></div>john