line spacing, line height
Hello NodeBox Community,
is there any possibilty to influence the line spacing of a text-on-path-Node.
As I change the fonts in that Node, the line-spacing changes extremely.
Attached two screenshots with ArialMT and Arial-Black.
Thanks for any help.
Philipp
Bildschirmfoto_2015-11-03_um_12.07.42.png
Bildschirmfoto_2015-11-03_um_12.08.12.png
Keyboard shortcuts
Generic
| ? | Show this help |
|---|---|
| ESC | Blurs the current field |
Comment Form
| r | Focus the comment reply box |
|---|---|
| ^ + ↩ | Submit the comment |
You can use Command ⌘ instead of Control ^ on Mac
Support Staff 1 Posted by john on 05 Nov, 2015 12:29 AM
Dear Phillip,
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?
But until this feature is added to some future release is there any way we could influence the leading ourselves?
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.
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.
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.
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.
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.
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.
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.
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).
Please give it a try and see if it works for you.
(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.)
Thanks for an interesting challenge!
John
Support Staff 2 Posted by john on 19 Nov, 2015 01:49 AM
Just for fun I hooked a sine wave node into my AdjustLeading subnetwork and voila: bouncing text.
Movie attached. For best results set it to loop.
John