widget newButton weird verticalTextOffset bug

Solar2D Widgets
#1

Hi there,

When I apply verticalTextOffset value to a new widget button I create, the Y position of the button is also offset by the same value.

This seems to be only when the font is pushed so far that part of it goes outside the bounds of the button.

It’s not that I’m trying to force the font outside the edge of the button - that would obviously not be unnecessary in most situations.

The problem is, on several fonts I use, the font’s invisible bounding box goes outside even though the visible font stays well within the edges of the buttons.

Has anyone else experienced this?

Corona - Is there a fix planned?

Thanks,

Ian

#2

Hi Ian,

Can you post some code and a screen clip of the issue?

Thanks,

Brent

#3

Hi Brent,

No problem. Thanks for getting back to me…

Okay - the buttons in the screenshot below all have the exact same y position set but the first one has a verticalTextOffset of 50 (I made it extreme to show the problem but even values as small as 5 cause the problem if the font is one with a large bounding area).

screenshot-1.png

As you can see, the text is offset, but the button has been offset too.

I presume this is because the overall height of the button has changed and therefore the y position appears different when it’s actually the same? Is that what’s happening?

My code is just standard widget button code - nothing altered…

local buttonImageData = ButtonImageData:getButtonImageData(); local imageSheet = graphics.newImageSheet( "btn-bg.png", buttonImageData ) btn = widget.newButton { width = params.w, height = params.h, label = params.txt, labelAlign = "center", labelYOffset = params.verticalTextOffset, emboss = false, font = params.fontName, fontSize = params.fontSize, labelColor = { default = params.textCol, over = params.textColOver, }, sheet = imageSheet, topLeftFrame = 1, topLeftOverFrame = 10, middleLeftFrame = 2, middleLeftOverFrame = 11, bottomLeftFrame = 3, bottomLeftOverFrame = 12, topMiddleFrame = 4, topMiddleOverFrame = 13, middleFrame = 5, middleOverFrame = 14, bottomMiddleFrame = 6, bottomMiddleOverFrame = 15, topRightFrame = 7, topRightOverFrame = 16, middleRightFrame = 8, middleRightOverFrame = 17, bottomRightFrame = 9, bottomRightOverFrame = 18, onEvent = handleButtonEvent } local layer = params.layer or interfaceLayer; layer:insert( btn, true ); btn.x = params.px; btn.y = params.py; btn.anchorX = 0.5; btn.anchorY = 0.5

   

I tried changing the anchorY to 0 but because the font’s bounding area spills out of the top and the bottom of the button, it still appears offset.

Any help would be much appreciated.

Thanks,

Ian

#4

Hi Ian,

Yes, this probably occurs because the height of the label (text object) may be more than it appears visually, and because it’s part of the group (the button itself) it affects the position of that overall group.

You may have some luck setting the group’s anchorChildren (since it’s a group), giving the group a different anchor point, and then aligning them all based on that.

http://docs.coronalabs.com/guide/graphics/group.html#groupanchors

Brent

#5

Hi Ian,

Can you post some code and a screen clip of the issue?

Thanks,

Brent

#6

Hi Brent,

No problem. Thanks for getting back to me…

Okay - the buttons in the screenshot below all have the exact same y position set but the first one has a verticalTextOffset of 50 (I made it extreme to show the problem but even values as small as 5 cause the problem if the font is one with a large bounding area).

screenshot-1.png

As you can see, the text is offset, but the button has been offset too.

I presume this is because the overall height of the button has changed and therefore the y position appears different when it’s actually the same? Is that what’s happening?

My code is just standard widget button code - nothing altered…

local buttonImageData = ButtonImageData:getButtonImageData(); local imageSheet = graphics.newImageSheet( "btn-bg.png", buttonImageData ) btn = widget.newButton { width = params.w, height = params.h, label = params.txt, labelAlign = "center", labelYOffset = params.verticalTextOffset, emboss = false, font = params.fontName, fontSize = params.fontSize, labelColor = { default = params.textCol, over = params.textColOver, }, sheet = imageSheet, topLeftFrame = 1, topLeftOverFrame = 10, middleLeftFrame = 2, middleLeftOverFrame = 11, bottomLeftFrame = 3, bottomLeftOverFrame = 12, topMiddleFrame = 4, topMiddleOverFrame = 13, middleFrame = 5, middleOverFrame = 14, bottomMiddleFrame = 6, bottomMiddleOverFrame = 15, topRightFrame = 7, topRightOverFrame = 16, middleRightFrame = 8, middleRightOverFrame = 17, bottomRightFrame = 9, bottomRightOverFrame = 18, onEvent = handleButtonEvent } local layer = params.layer or interfaceLayer; layer:insert( btn, true ); btn.x = params.px; btn.y = params.py; btn.anchorX = 0.5; btn.anchorY = 0.5

   

I tried changing the anchorY to 0 but because the font’s bounding area spills out of the top and the bottom of the button, it still appears offset.

Any help would be much appreciated.

Thanks,

Ian

#7

Hi Ian,

Yes, this probably occurs because the height of the label (text object) may be more than it appears visually, and because it’s part of the group (the button itself) it affects the position of that overall group.

You may have some luck setting the group’s anchorChildren (since it’s a group), giving the group a different anchor point, and then aligning them all based on that.

http://docs.coronalabs.com/guide/graphics/group.html#groupanchors

Brent