Line Breaks

[kylamedina]

Super cool project, thank you for making it :)
I understand that Blotter is made for large headers not for whole sentences but is there no way to use this on a few words on multiple lines?

[bradley]

So to answer your base question, 'can Blotter render line wrapping?', the answer is no. Blotter finds dimensions for its text using virtual elements and then renders the texts in the size it believes each text to be. I have no plans to add line wrapping support for individual text renders, sorry.

HOWEVER

Blotter is really good at rendering multiple texts through the same material, with full support for updating uniforms on each text individually. I think your best bet would be to do something like the following:

<span id='text1-target'></span> <span id='text2-target'></span>

var styleProperties = {
  family : "sans-serif",
  size : 17
});

var text1 = new Blotter.Text("Hello", styleProperties);
var text2 = new Blotter.Text("World", styleProperties);

var material = new Blotter.LiquidDistortMaterial();

var blotter = new Blotter(material, {
  texts : [text1, text2]
});

var scope1 = blotter.forText(text1);
var scope2 = blotter.forText(text2);

scope1.appendTo(document.getElementById("text1-target"));
scope2.appendTo(document.getElementById("text2-target"));

Hope that helps.

Bye!