Why can't I vertically center my text over a rectangle...

Audio and Graphics
#1

This is driving me mad! Using the following code segment to draw a simple rectangle and then place a simple piece of text over it. Horizontal centering is working well but vertical is off. Kindly see attached image which is the result of code that follows. Can anyone kindly point out my error to me? Thanks much!!!

local widget = require( "widget" ) local titleBarHeight = 90 local splitLeftWidth = 400 local titleBarStrokeWidth = 2 local titleBarFillColor = {247/255, 247/255, 247/255} local titleBarStrokeColor = {192/255, 192/255, 196/255} local titleBarLeftLabel = "Settings" local titleBarLeft = display.newRect(0, 0, splitLeftWidth, titleBarHeight) titleBarLeft.anchorX, titleBarLeft.anchorY = 0, 0 titleBarLeft.strokeWidth = titleBarStrokeWidth titleBarLeft:setFillColor(unpack(titleBarFillColor)) titleBarLeft:setStrokeColor(unpack(titleBarStrokeColor)) local titleBarLeftText = display.newText( titleBarLeftLabel, 0, 0, native.systemFont, 20 ) titleBarLeftText:setFillColor( 0, 0, 0 ) titleBarLeftText.anchorX = 0.5 titleBarLeftText.anchorY = 0.5 titleBarLeftText.x = splitLeftWidth / 2 titleBarLeftText.y = titleBarHeight / 2
#2

I’ve posted too many rants about vertical text placement :) Here is a pretty recent post: http://forums.coronalabs.com/topic/42213-scaling-texts/

But try adding this to the end of code (putting a red rectangle under text).

[lua

local textBg = display.newRect(titleBarLeftText.x, titleBarLeftText.y, titleBarLeftText.width, titleBarLeftText.height)

textBg.anchorX, textBg.anchorY = 0.5, 0.5

textBg:setFillColor(1,0,0)

textBg.alpha = 0.5

[/lua]

The red rectangle is probably perfectly in the middle of titleBarLeft, but the text sits not in the middle of red. This position will also vary depending win simulator, mac simulator, android and ios.

#3

Wow. I totally missed this along the way. So with all the glory of G2 and the new anchorX,Y being center driven we are stuck with this issue? What is the Corona Labs response? If the SDK is not good enough to center 2 objects against each other then what good is it? I just can’t believe we are still struggling with such simple issues… Is there a bug report for this or should I go ahead and create one. Thanks!

Edit : Tried the red rectangle and find that it sits perfectly behind the text and also is not correctly centered. 

#4

I guess its bit harsh to blame Corona, probably more of a limitation than a bug. But this is one of the major time sucking black holes along with the input boxes. 

#5

I just don’t understand. The text is a vector drawn graphic object. If its size is not properly determined by Corona SDK and placed accordingly I don’t know who else to blame I’m sorry. This is a bug IMHO that needs to be fixed. If this is a system limitation which will never be fixed I’d like to hear from CL why. Just doesn’t make sense to me. Sorry if I sound harsh but quite frankly I can’t help feeling this way after all the time sucking black holes I’ve had to struggle with along the way. 10x development speed… Till you hit the roadblocks… 

#6

I tested same case in Illustrator just out of curiosity. Made some text, placed vertically 100px and it does not actually sit perfectly in the middle either. And if you put a rect behind it in same height and y position as text like above you see the exact same thing.

The killer for us is that the offset is varies on the platforms, so you can’t just offset until it looks right in the simulator.

#7

Ok. Lets put aside text for a second. I tried the following which if you read the code is expected to give me the same rectangle and draw a simple line right in the middle of it. The line is also drawn off-center as my text was earlier on. Am I making a mistake in my code? I don’t think so but just in case I’m missing something here… See attached image for result of the code. 

local widget = require( "widget" ) local titleBarHeight = 100 local splitLeftWidth = 400 local titleBarStrokeWidth = 2 local titleBarFillColor = {247/255, 247/255, 247/255} local titleBarStrokeColor = {192/255, 192/255, 196/255} local titleBarLeftLabel = "Settings" local titleBarLeft = display.newRect(0, 0, splitLeftWidth, titleBarHeight) titleBarLeft.anchorX, titleBarLeft.anchorY = 0, 0 titleBarLeft.strokeWidth = titleBarStrokeWidth titleBarLeft:setFillColor(unpack(titleBarFillColor)) titleBarLeft:setStrokeColor(unpack(titleBarStrokeColor)) local myLine = display.newLine(0, titleBarHeight / 2, splitLeftWidth, titleBarHeight / 2) myLine.anchorX, myLine.anchorY = 0.5, 0.5 myLine:setStrokeColor(0,0,0)
#8

Isn’t it just the titlebar in the way?

#9

Sorry. I don’t understand what you mean. Can you kindly reword? Thanks

#10

Sorry I mean the status bar (with the battery status etc). Try: display.setStatusBar( display.HiddenStatusBar )

#11

Ok. The statusBar height was throwing this off. Hiding it or moving the rectangle further down sorts this issue. Thanks for that catch.

The centering is almost done. The text is still just a little off but not that much. I will build this and put on IOS and Android to see how it behaves on real devices. Appreciate the support. 

#12

Yeah it looks a lot better now :slight_smile: The offset might be fine depending on usage.

#13

Built it and loaded it on 3 devices. I can certainly see the difference in text alignment between my iPad mini, iPhone 4 and Android 2.2 phone. I think I can live with it for now but it is an embarrassment for Corona Labs if this simple centering / placement issue is not fixed in the long run. Thanks for all your support. 

#14

Kerem, I know that you’re eager to blame us for everything even before you check your own code (the status bar height, for example), but please don’t make a very complex issue like text rendering seem like it’s just some “simple fix”. Text rendering is a ferocious beast and always has been, as far back as I’ve been using Corona. It’s not just a Corona thing either, and it varies from platform to platform, OS to OS. If this would have been an “easy fix” as you imply, we would have done so long before now.

Thanks to @jonjonsson for creating some custom methods to help alleviate this issue somewhat.

Brent

#15

Them fighting words… You might notice the following in my original post if you review it again “Can anyone kindly point out my error to me?”. I fully assumed I was doing something wrong leading to the rate of off-center printing of text I was seeing.

I have no idea why you think I am eager to blame Corona Labs for everything. I am one of your biggest champions. I want nothing but success for Corona SDK as it will lead to our success. I just happen to have a different opinion at times on what success may look like for Corona Labs though and that I will not deny. 

Thanks for your post though. Happy Holidays to you and your family.

#16

I’ve posted too many rants about vertical text placement :) Here is a pretty recent post: http://forums.coronalabs.com/topic/42213-scaling-texts/

But try adding this to the end of code (putting a red rectangle under text).

[lua

local textBg = display.newRect(titleBarLeftText.x, titleBarLeftText.y, titleBarLeftText.width, titleBarLeftText.height)

textBg.anchorX, textBg.anchorY = 0.5, 0.5

textBg:setFillColor(1,0,0)

textBg.alpha = 0.5

[/lua]

The red rectangle is probably perfectly in the middle of titleBarLeft, but the text sits not in the middle of red. This position will also vary depending win simulator, mac simulator, android and ios.

#17

Wow. I totally missed this along the way. So with all the glory of G2 and the new anchorX,Y being center driven we are stuck with this issue? What is the Corona Labs response? If the SDK is not good enough to center 2 objects against each other then what good is it? I just can’t believe we are still struggling with such simple issues… Is there a bug report for this or should I go ahead and create one. Thanks!

Edit : Tried the red rectangle and find that it sits perfectly behind the text and also is not correctly centered. 

#18

I guess its bit harsh to blame Corona, probably more of a limitation than a bug. But this is one of the major time sucking black holes along with the input boxes. 

#19

I just don’t understand. The text is a vector drawn graphic object. If its size is not properly determined by Corona SDK and placed accordingly I don’t know who else to blame I’m sorry. This is a bug IMHO that needs to be fixed. If this is a system limitation which will never be fixed I’d like to hear from CL why. Just doesn’t make sense to me. Sorry if I sound harsh but quite frankly I can’t help feeling this way after all the time sucking black holes I’ve had to struggle with along the way. 10x development speed… Till you hit the roadblocks… 

#20

I tested same case in Illustrator just out of curiosity. Made some text, placed vertically 100px and it does not actually sit perfectly in the middle either. And if you put a rect behind it in same height and y position as text like above you see the exact same thing.

The killer for us is that the offset is varies on the platforms, so you can’t just offset until it looks right in the simulator.