JavaFX - Center Text in TextFlow vertically

Question

I'm currently working with JavaFX' Text and TextFlow layout, and I need to figure out how to center the Text node inside a TextFlow. As you see in the picture below, I've added some ImageView's, to simulate emoticons which I want to add.

The problem is, that they are aligned differently. While the emoticons are centered, the text stays at the bottom.

The green border line represents the TextFlow's border, the blue border line the Text's one.

I've already tried out to set the Text's textOrigin property to CENTER, but it doesn't change anything in my case. Setting textAlignment to CENTER won't work either.

Here's my code excerpt:

public CChatMessage(String senderName, String messageText)
{
    this.sender = new Label(senderName);
    this.sender.setTextAlignment(TextAlignment.CENTER);
    this.sender.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 14));

    this.message = new Text(messageText);
    this.message.setTextAlignment(TextAlignment.CENTER);
    this.message.setTextOrigin(VPos.CENTER);

    this.setEffect(new DropShadow());
    this.setAlignment(Pos.CENTER);
    this.setPadding(new Insets(0, 10, 10, 10));

    TextFlow messagePane = new TextFlow();
    messagePane.setStyle("-fx-border-color: green");
    messagePane.setTextAlignment(TextAlignment.CENTER);
    Image smileyImage = new Image("/resources/smiley.png");

    messagePane.getChildren().addAll(this.message, new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage), 
                                                   new ImageView(smileyImage), new ImageView(smileyImage), new ImageView(smileyImage));

    if(!senderName.equals(""))
    {
        CChatMessage.setMargin(messagePane, new Insets(10, 0, 0, 0));
        this.message.setFont(Font.font("Calibri", FontWeight.SEMI_BOLD, 18));
        this.getChildren().addAll(this.sender, messagePane);
    }
    else
    {
        this.setPadding(new Insets(5, 5, 5, 5));
        message.setFont(Font.font("Verdana", FontWeight.EXTRA_BOLD, 11));
        this.getChildren().add(messagePane);
    }
}

Modestamodeste

Answer 1

Edit: I think this is the answer you're looking for: https://bugs.openjdk.java.net/browse/JDK-8098128

Edit 2: It appears the solution I've given below has a problem. The words in the Text node don't stay within the HBox. So far, I haven't figured out how to fix that. But it does stay inside when the Text nodes are inside a TextFlow container.

A solution to the problem has been given there. I don't fully understand it but I hope you do.

I'll just leave my original answer since it contains the way I'm dealing with the issue.

This solution might work. After failing to center the Text node like that, I've come to this workaround: Rather than using the TextFlow, I've used an HBox. It gets the job done for me. The behaviour is similar enough and I'm able to align the Text nodes whichever way I want.

But a word of caution, I'm just a newbie. So there may be issues that would pop up if you used this method. I don't know about the properties of TextFlow and HBox enough to confidently answer. But I just thought I'd tell you my solution since that's what I'm using for my project now. (Edit: As you can read above at Edit 2, I ran into one problem. There might be more.) :)

Happy coding.

Roaring

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - From Review – Gauze

That's true. I agree with you. I gave that only because I don't really understand what's said there. But I'll be going through that today or tomorrow. I'll type out the answer and remove the link if I can understand what's said there. :) – Roaring