Text node properties


#1

Hi!

Was working with some text lately, and would love to have a few more options, specifically:
Letter and word spacing. Multi-line text input (a textbox). Out of the box shadow setting
x/y/blur/opacity/color :slight_smile:
decoration e.g. underline/strikethrough.

And I do understand that some of these are achievable through code. One can hope for a more instant solution :slight_smile:

Perhaps attaching a CSS property to a text node could be a solution to this or just specifying a CSS class. I imagine the text options specifies in the CSS class would overwrite the text node settings, while others would remain (the one’s not specified in the CSS but selected in the text node). So quick for prototyping text, but more options to edit when needed.


#2

Small ping on this for some workaround ideas :wink: tried css but have no control over text alignments/positioning and relations to other conponents :frowning: so would very much prefer to use the text node.


#3

Unfortunately there’s no good way to do this in Noodl at the moment. You can use a HTML Content node, write all the text using HTML and use the CSS Definition to style it (or do it inline with style= in the HTML Content node.

But the frame rate will suffer quite quickly if you have many HTML Content nodes.


#4

Hi @micart, I’ve got a follow-up question with regards to doing HTML multi-line text. Is there a way to set content-height on the node considering I’d like to do stack-layout and add additional components right below the text? The text might not be known in advanced and the height might change.

Thanks!


#5

No, it’s not supported. But since we have access to Javascript there might be a few ways to implement it manually.

You could create a JS node with the HTML DOM Element as input, that watches the size of the html and sets it back to the height of the HTML Content node.

Something like this:

inputs: {
   domElement: "domelement"
},
outputs: {
     //Connect to the height of the HTML Content node, and make sure it's height is set to pixels, not %
   height: "number" 
},
run: function(inputs, outputs) {
   //this only works in "Fill" mode in project settings
   //aspect fill will need some scaling based on window.innerHeight and your project height
   outputs.height = inputs.domElement.getBoundingClientRect().height;
   
   //do this every frame so the height updates if the HTML Content updates
   //not very efficient, but fine for a prototype!
   this.runNextFrame();
}

Completely untested, so you might need to tweak it a bit