Different text formatting within same string?
Heyo!
I'm working on a project where I have grouped text (a year and some sentences) that are being rotated around a shape. I'd like to format the year and the associated text separately - bold, font size and color. In the past, I've been able to render the parts separately and rotate each set as needed, but this time I need the text (sentences) to word-wrap UNDER the year, so I really need them in the same text box area.
Most of my attempts end up rendering my text objects as "<Path><Path>" or the like, rather than the text inside.
Alternatively, I need the text to not render as vectors, but as actual text, so when I pull the result into editing software I can adjust the font properties appropriately. I can adjust color as vectors, but I obviously can't easily scale, change weight or font with vectors...
Any help here would be awesome!!
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 18 Jan, 2019 09:05 AM
Hi Brendon,
There is no way in NodeBox to output text that you can then style elsewhere, so you have to do your formatting before you turn everything into vectors. Fortunately there is almost nothing NodeBox cannot do with text.
The basic idea is to create different text paths for each chunk of text that needs to styled differently and then combine them. Wrapping sentences under a large year is easy - just set the text width to match the width of the year path and Nodebox will wrap for you.
Doing this while at the same time making all the text follow the same path is a bit trickier.
I'm not sure what you mean by "wrapping a year around a shape" and making sentences wrap both below the year and around the shape at the same time.
Do you mean something like the screenshot I attached?
For this example I have the year 2019 as one string, and the sentences as a second string, both wrapped around the same arc. In order to accommodate three separate lines of wrapped sentences I chop the sentences string into substrings and do the wrapping myself (zipped demo file attached).
You can fiddle with the three numbers at the top to define where the lines break, and then set margins and baseline offsets in the text on path nodes to tidy everything up. Once that is done you can set your fonts and colors for each line as you wish.
If this is not what you meant by "wrapping a year around a shape", please write back and include a crude hand-drawn sketch of the effect you are trying to achieve.
Hope this helps!
John
2 Posted by Brendon Caulkin... on 18 Jan, 2019 10:29 PM
Apologies, I did a poor job of explaining the task, but the attached picture should make it clearer.
I ended up working out a solution by rendering the year and associated text separately. I copied the code that was rendering the concatenated data (2 columns), and simply added spaces to the text portion to provide room for the years to render on top (so they didn't overlap). It's lazy and verbose but got me what I needed (as evidenced by the attached image of my near-final result).
The main complication I was having was the need to word-wrap in the same text box boundary (so the year was "embedded" in the text block), but still use different styling for only a part of each text item. If we use your example, let's say the first word of each row of text needs to be styled differently, but the data comes from an external file (I had 60 or so items to arrange - two columns, year & text), so explicitly listing them isn't realistic.
It was trivial to apply styling to the year or the text sets, but iteratively combining the geometry row-by-row into a list of geometries that could then be rotated proved impossible (for me). In effect, I was trying to combine my two styled lists, like so:
Array1 = [a1, a2, a3, ...]
Array2 = [b1, b2, b3, ...]
Result = [a1b1, a2b2, a3b3, ...]
Using a geometric combine (union) lumped everything together, but wouldn't render right (either <Path> or everything jumbled together as a bowl of spaghetti). A list combine just tacked one list onto the end of the other for double the number of items, each half of what I needed.
The problems I was facing make sense now, (because the text is rendered and done when it comes out of the textpath node - recombining it would never have worked), but at 11:50 at night, higher brain function isn't what it could be.
I don't work with NodeBox on a daily basis, only when I have clients that need some specialized viz, so I'm very possibly missing an easy answer here, so I'm hoping you've got an easy solution I can leverage the next time this comes up.
Thanks for the super quick response, it's greatly appreciated!!
Support Staff 3 Posted by john on 19 Jan, 2019 07:11 PM
Brendan,
Ah, I see now.
Attached is a node called text_mixer that does what you want. It uses your basic strategy of adding spaces in front of the description text, but automatically combines title and description into unified groups that you can rotate or place as you wish.
The zipped file includes a csv with two columns, year and description. To make it a little more challenging I used Chinese astrology names which vary in width for the year, but normal years or any other string would work just as well. I look up the year and description columns in the table and feed them into the text_mixer node.
The text mixer node lets you set title font, description font, font size, and block width. The red and black colors for title and description are set inside the node, but you could easily change those or publish them as additional parameters if you wanted.
Text mixer works by rendering the title as a path, finding the width of that path, then dividing by the width of a space in the description font. It then concatenates that number of spaces (plus one) in front of the description, renders it as a path, then combines the two paths and groups them. This is not a perfect solution, but works fairly well.
To create the final image I just translate and rotate the output of the text_mixer node. To make a flat list you could just attach it to a stack node set to "south".
I hope you find this useful in case you ever run into a problem like this again.
Thanks,
John