How to vertically center text?

First of all to the creators/contributors, thanks so much for a great library.

I have create a GenericStyledArea that incorporates both text (using the default TextExt) and custom nodes. For example, one custom node renders some math:

Problem is they are not vertically aligned.

The rendered math is a Canvas. If it were translated up or down, this introduces possible clipping. So I think the TextExt needs to be vertically centered, possible with an additional offset as well.

However, using the translateYProperty for the TextExt would also possibly cause clipping, unless it were bound to the height of the ParagraphBox. Even if it were bound to the height of the ParagraphBox, it would also need to consider how many line-wraps there are. This is way more complicated than setting the alignmentProperty of an HBox, for example.

Also, the vertical alighment method needs to be segment by segment, and generalize to multi-line cases.

I couldn’t find any vertical alignment property and a search for “vertical alignment” here comes up empty, so maybe not thinking about this correctly or maybe I’m searching the wrong terms.

Any ideas?

Here’s a more extreme case:

[Jugen]

First of all: VERY NICE !!! Unfortunately I don’t have an answer off the top of my head, but here is what I suggest.

Since RichTextFX basically just uses a JavaFX TextFlow control for the layout of nodes (in your case Text & Canvas) try experimenting with a plain TextFlow to get the alignment you want (in various scenarios if need be). Once to you get that right, then you should be able to apply the same technique to RichTextFX.

If you get what you want with TextFlow but can’t seem to get the same results with RichTextFX then post your TextFlow findings here and I’ll try and help if I can.

[Jugen]

@mgroth0 hope you came right with this … please reopen if not.