How to make the string in Text left grow

Question

If the length of String in content increased, I want the left side of Text is extended while the right side of Text remains still. How to achieve that?
I have tried the TextAlignment.RIGHT, but it doesn't work as I thought. Any idea?

Answer 1

Aha! Nice catch!
Meanwhile, I explored an alternative solution, a smooth scrolling, with two alternatives:
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.Node;
import javafx.scene.text.*;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Circle;
import javafx.scene.paint.Color;
import javafx.scene.transform.Transform;
import javafx.scene.layout.Container ;
import javafx.geometry.Rectangle2D;
import javafx.animation.*;
def BASE_SIZE = 300;
def MARGIN = BASE_SIZE / 30;
var boundingRect = Rectangle
  x:       MARGIN * 2
  y:       BASE_SIZE / 2 - BASE_SIZE / 6
  width:   BASE_SIZE * 1.618 - MARGIN * 4
  height:  BASE_SIZE / 3
  arcWidth:  50
  arcHeight: 30
  fill:    Color.web('#00BB00')
  stroke:  Color.GREEN
  strokeWidth:  5
var debug = Rectangle { x: boundingRect.x, y: boundingRect.y + boundingRect.height / 2 - 10,
width: 5, height: 20,
fill: Color.RED, stroke: null }
var displayedText1 = Text
  content: "Hello World!"
  font: Font { size: 48, name: "Lucida Sans" }
  textOrigin: TextOrigin.TOP
var displayedText2 = Text
  content: "Happy to meet you"
  font: Font { size: 36, name: "Calibri" }
  textOrigin: TextOrigin.TOP
class TextEffect extends Container
  var text: Text;
  init
    content = text;
    width = text.boundsInLocal.width;
    height = text.boundsInLocal.height;
  postinit
    // If in init, textUnveiler isn't visible!?
    clip = Rectangle
      width: 0
      height: height
  function GetClip()
    return clip as Rectangle;
class TextSlider extends TextEffect
  function RevealWidth(shownWidth: Number)
    var rect = GetClip();
    rect.width = shownWidth;
    rect.x = width - shownWidth;
    text.x = width - shownWidth;
    if (text.x < 0) text.x = 0;
class TextUnveiler extends TextEffect
  function RevealWidth(shownWidth: Number)
    var rect = GetClip();
    rect.width = shownWidth;
    rect.translateX = width - shownWidth;
var textSlider = TextSlider
  text: displayedText1
  // Position container near right side of bounding rect (depending on size of text)
  translateX: boundingRect.boundsInLocal.maxX - displayedText1.boundsInLocal.width - MARGIN * 2
  translateY: boundingRect.y + MARGIN
var textUnveiler = TextUnveiler
  text: displayedText2
  translateX: boundingRect.boundsInLocal.maxX - displayedText2.boundsInLocal.width - MARGIN * 2
  translateY: boundingRect.y + MARGIN + 48
println("{textSlider.boundsInScene} || {textSlider.GetClip().boundsInScene} || {%.2f textSlider.width} {%.2f textSlider.translateX} {%.2f textSlider.translateY} {%.2f textSlider.height}");
println("{textUnveiler.boundsInScene} || {textUnveiler.GetClip().boundsInScene} || {%.2f textUnveiler.translateX} {%.2f textUnveiler.translateY} {%.2f textUnveiler.width} {%.2f textUnveiler.height}");
var visiblePartWidth = 0.0 on replace
  textSlider.RevealWidth(visiblePartWidth);
  textUnveiler.RevealWidth(visiblePartWidth);
  debug.x = boundingRect.x + boundingRect.width - visiblePartWidth - MARGIN * 2;
//~   var bil = textSlider.GetClip().boundsInLocal;
//~   println("{%.2f bil.minX} {%.2f bil.minY} {%.2f bil.maxX} {%.2f bil.maxY}");
Stage
  title:   "Smooth text on right"
  visible: true
  scene:   Scene
    width:   BASE_SIZE * 1.618
    height:  BASE_SIZE
    fill:    Color.web('#00BABE')
    content:
      boundingRect
      textSlider
      textUnveiler
      debug
var t = Timeline
  keyFrames:
    KeyFrame { time: 1s,  values: visiblePartWidth => 0.0 }
    KeyFrame { time: 10s, values: visiblePartWidth => boundingRect.width }
t.play();It is also a demonstration of clipping...