How to properly center a Text in a Flow?

#1

Hello, I am trying to create a text button using the Flow class.

My problem is that when I put a Text in my Flow, it is not properly centered vertically due to the way getBoundsRec is computed for Text, and it ends up looking better if I just stop using Flow and center the Text by hand instead:
flow_problem

Here is the code using Flow:

class Button extends Flow {

    public function new(text:String, width:Int, height:Int, parent:Scene) {
        super(parent);

        this.layout = FlowLayout.Stack;

        this.minWidth = width;
        this.minHeight = height;

        this.borderWidth = 5;
        this.borderHeight = 5;

        this.verticalAlign = FlowAlign.Middle;
        this.horizontalAlign = FlowAlign.Middle;

        this.backgroundTile = Res.sprites.ui.toTile();

        var font = Res.fonts.atlantis_text_bold_32.toFont();
        var label = new Text(font, this);
        label.text = text;
    }
}

And here is the code computing the position of Text by hand:

class Button {
    var background:ScaleGrid;
    var font:Font;
    var label:Text;

    var width:Float;
    var height:Float;

    public function new(text:String, width:Float, height:Float, parent:Scene) {
        this.width = width;
        this.height = height;

        background = new ScaleGrid(Res.sprites.ui.toTile(), 5, 5, parent);
        background.width = width;
        background.height = height;

        font = Res.fonts.atlantis_text_bold_32.toFont();

        label = new Text(font, background);
        label.text = text;
        label.x = width * 0.5 - label.textWidth * 0.5;
        label.y = height * 0.5 - label.textHeight * 0.5;
    }
}

In the exemple I use a custom font which kind of exacerbates the problem, but it is still present using the default font instead.

So should I just abandon the idea of using a Flow like this or is there something I’m missing ?

Thanks in advance !

#2

Here is a second screenshot with debug = true to highlight the problem a bit better:
flow_problem_2

The bounds of the Text include some empty space above it but none below, which is what makes the text off-center.

1 Like
#3

in short: answer: no, I think you’ll have to do it by hand for now… or one has to precise in the repo code that the first line of the h2d.Text.text must neglect its upper space when calling getBoundsRec

…

(old obsolete answer below)

So, I have the same problem. As far as I check the heaps repo code the weird empty space is just including the gap between different lines:

in line 455: calcHeight = y + font.lineHeight;

otherwise you’d get something like this I guess (very dense text lines):

some_text_no_gaps

…
However the next line it says: calcSizeHeight = y + (font.baseLine > 0 ? font.baseLine : font.lineHeight); so maybe one of these values can help out… I’ll check later…

edit / some time later… couldn’t solve it but here’s a class for quick testing

import h2d.Text;
import hxd.res.DefaultFont;
import h2d.Scene;
import h2d.Flow;

class CenteringTextsInFlow extends hxd.App {
    
    override function init() {
        var b = new Button( "jingle", 200,  8, s2d );
        var b = new Button( "jingle", 200, 16, s2d ); b.setPosition( 0,  50 );
        var b = new Button( "jingle", 200, 40, s2d ); b.setPosition( 0, 100 );
    }
    public static function main() {
        new CenteringTextsInFlow();
    }
}

class Button extends Flow {

    public function new(text:String, width:Int, height:Int, parent:Scene) {
        super(parent);

        this.layout = FlowLayout.Stack;

        this.minWidth = width;
        this.minHeight = height;

        this.borderWidth = 5;
        this.borderHeight = 5;

        this.verticalAlign = FlowAlign.Middle;
        this.horizontalAlign = FlowAlign.Middle;

        this.backgroundTile = h2d.Tile.fromColor(0x0000FF);//Res.sprites.ui.toTile();

        var font = DefaultFont; //Res.fonts.atlantis_text_bold_32.toFont();
        var label = new Text(font.get(), this);
        label.text = text;
    }
}

sample:
00001_text