line spacing, line height

ppape's Avatar

ppape

03 Nov, 2015 11:12 AM

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

  1. Support Staff 1 Posted by john on 05 Nov, 2015 12:29 AM

    john's Avatar

    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

  2. Support Staff 2 Posted by john on 19 Nov, 2015 01:49 AM

    john's Avatar

    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

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Bildschirmfoto_2015-11-03_um_12.07.42.png 269 KB
  • Bildschirmfoto_2015-11-03_um_12.08.12.png 264 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

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

Recent Discussions

25 May, 2024 11:52 AM
24 May, 2024 07:39 AM
16 May, 2024 02:11 AM
16 May, 2024 01:58 AM
14 May, 2024 01:29 AM

 

13 May, 2024 12:36 AM
12 May, 2024 07:46 PM
05 May, 2024 04:38 PM
03 May, 2024 06:50 AM
03 May, 2024 12:30 AM
03 May, 2024 12:09 AM