Centering text on a rectangle not working

[smguyk]

I have an sf::RectangleShape inputFieldRect_ and an sf::Text inputFieldText_ and I want to center the text on the rectangle because the sf::Text's dimensions will vary because its string will have different lengths.

After setting inputFieldText_'s string with inputFieldText_.setString(s); (s is a an std::string that the user inputs) I am adjusting its position so that it's still in the center of inputFieldRect_.

This is my code for that but the text is too much to the left and a little too much to the bottom, so not perfectly centered:

sf::FloatRect rectBounds = inputFieldRect_.getGlobalBounds();
sf::FloatRect textBounds = inputFieldText_.getGlobalBounds();

inputFieldText_.setPosition(
  rectBounds.left + (rectBounds.width / 2) - (textBounds.width / 2),
  rectBounds.top + (rectBounds.height / 2) - (textBounds.height / 2)
);

Can someone please help me? I don't see the flaw.

[Nexus]

Are you sure the bounding rects are what you expect them to be? For the text, you could draw a sf::RectangleShape that only visualizes the bounds to verify that.

And you don't change the origin somewhere?

[G.]

sf::Text localBounds left and top are not 0 and you might need to take that into account.

[smguyk]

I don't change the origin anywhere.

I followed your advice and drew a red rectangle around the text, and took some screenshots to demonstrate it.
Ignore the white background, it's because I took a screenshot and cut out the relevant part (teal rectangle + black text).

This is right after I've created the rect and text:


The position hasn't been adjusted yet, but you can already see that the rect's right bounds are bigger than the actual font.

This is when I enter the first letter:


You can see for some reason the rect stays at its original position even though I've updated it.

This is when I enter another letter:


The rect finally moves, but its and the text's positions do not match.

This is after entering some more stuff:


Just like in the picture above, the bounding box is out of place.

I tried using different fonts, but they all have the problem of having weird bounding boxes...

Edit:

When I just change the string but not the text's position, the bounding box is like this:



It still has this gap on the right, but besides that it's perfect.

[Nexus]

Can you try with the latest revision from the GitHub master branch?

In case the problem persists, please show a minimal code example that draws the text and its bounds and shows this issue.

[smguyk]

Okay, but I'll have to comiple SFML tomorrow because I've never done it before and I suppose it's going to take some time

[dabbertorres]

It really doesn't take more than 5 minutes. You just need cmake!

[smguyk]

Compiling doesn't work...

Nevermind then but thanks anyway

[astr0wiz]

Regarding the odd positioning of the bounding box, sample code would help a lot.  For the space on the right of the letters in the font, that is to be expected.

Fonts(well, most) are built with spacing on either side of the glyphs.  This is how we get little spaces between letters on the screen.  Font designers recommend spacing on the right, but one may build a font with spacing on the left, both left and right, or none at all.

So, if you really want a centered bit of text, you will need to make allowances for the inherent spacing.

[jlomaka]

In my case help this slightly modified solution, i just change this (textBounds.height / 2) to this textBounds.height

Code: [Select]

sf::FloatRect rectBounds = inputFieldRect_.getGlobalBounds();
sf::FloatRect textBounds = inputFieldText_.getGlobalBounds();

inputFieldText_.setPosition(
  rectBounds.left + (rectBounds.width / 2) - (textBounds.width / 2),
  rectBounds.top + (rectBounds.height / 2) - textBounds.height
);