How to center text vertically

vitalitymobile

Hi Guys!
I want to align the single line text center in the y-axis and I use FontBase.TLF_VCENTER but the text go a little higher.
If I use FontBase.TLF_REF_MIDDLE then it works.
So why FontBase.TLF_VCENTER do not work as document said: "Center text vertically."

local layout_params = { flags = FontBase.TLF_CENTER|FontBase.TLF_VCENTER } --local layout_params = { flags = FontBase.TLF_CENTER|FontBase.TLF_REF_MIDDLE } local text = TextField.new(global.fredoka_120,"123312") text:setTextColor(0xFFFFF) self:addChild(text) text:setPosition(CX, CY) self:addChild(text) text:setText("123312") text:setLayout(layout_params)

Thanks!

hgy29

It doesn’t work because for gideros to be able to center, you have to give it the width and/or height of the area of interest. In your case you seem to compute center by yourself, and position the text by yourself too, so I am not sure what you expected...

vitalitymobile

@hgy29 OK I see the point.
FontBase.TLF_CENTER works without providing the width so I just think FontBase.TLF_VCENTER will work with the single line too.
Anyway, I can handle the center by set flag FontBase.TLF_REF_MIDDLE or calculate by add getHeight() * 0.5 to the desired Y pos

hgy29

Yes, TLF_CENTER works, unexpectedly! This is because since you didn’t supply width, gideros took the with as 0 and computed text offset as (0-textwidth)/2, which turns out to be correct if you position its origin in the center. Maybe the same goes for VCENTER in the end, except that default ref is baseline, so final y offset would have been (0-textheight), that is text drawn slightly upwards. If you want to use VCENTER then use REF_TOP too

vitalitymobile

@hgy29 Completely understood!
With FontBase.TLF_REF_TOP we will turn textfield to top left base point and then FontBase.TLF_CENTER|FontBase.TLF_VCENTER will equals setAnchorPosition 0.5, 0.5

So the hacky way is

local layout_params = { flags = FontBase.TLF_CENTER|FontBase.TLF_VCENTER|FontBase.TLF_REF_TOP}
text:setLayout(layout_params)
text:setPosition(px, py)

And then (px, py) is always the center of the text

Thank for your detail explain!