Quick Links: Download Gideros Studio | Gideros Documentation | Gideros Development Center | Gideros community chat | DONATE
How to center text vertically — Gideros Forum

How to center text vertically

edited September 2018 in General questions
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:setPosition(CX, CY)

Screen Shot 2018-09-14 at 11.20.12 PM.png
562 x 841 - 82K
Screen Shot 2018-09-14 at 11.21.04 PM.png
511 x 795 - 80K
Coming soon


  • hgy29hgy29 Maintainer
    Accepted Answer
    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...
  • @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
    Coming soon
  • hgy29hgy29 Maintainer
    Accepted Answer
    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
  • edited September 2018
    @hgy29 Completely understood! :smile:
    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:setPosition(px, py)

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

    Thank for your detail explain!

    Likes: antix

    Coming soon
    +1 -1 (+1 / -0 )Share on Facebook
Sign In or Register to comment.