Justify text and Slider hover problem

Questions
1
  • Hello everyone, is there a way that I can change the text paragraph alignment to justify in the TextBlock?
  • Also, when I use an MoveObservable and OutObservable to set the thumb color for slider, it only change the hover color right after I clicked in the slider, is there a way that the MoveObservable will change color without clicking it?

Here is the playground example: https://www.babylonjs-playground.com/#4P8PJY#53

2

what about this?

‘https://www.babylonjs-playground.com/#4P8PJY#54’
You can add ‘textHorizontalAlignment’ (0-2 or in plain code) to the out or enter event (or both).
Would that work for you?

Edit: huh, hang on just a minute, there was an error in my PG but I tried to quickly resolve it but it seems as just now something is going on with the GUI in preview. I know they are making changing on the GUI so this might not be the best moment to check in ‘preview’. You should switch to cdn and try something like this:

// GUI

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“UI”);

var rect = new BABYLON.GUI.Rectangle();
rect.width = "500px";
rect.height = "300px";
advancedTexture.addControl(rect);

var myText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ";

var tbtext = new BABYLON.GUI.TextBlock(tbtext);
tbtext.text = myText;
tbtext.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
tbtext.textWrapping = true;
tbtext.color = "white";
rect.addControl(tbtext);

var slider = new BABYLON.GUI.Slider();
slider.width = "220px";
slider.height = "25px";
slider.top = "250px";

slider.pointerEnterAnimation = () => {
slider.thumbColor = “blue”;
tbtext.text = myText;
tbtext.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_JUSTIFY;
};

slider.pointerOutAnimation = () => {
slider.thumbColor = “black”;
tbtext.text = myText;
tbtext.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;

};
advancedTexture.addControl(slider);

return scene;

};