Correct text vertical alignment in Football mode and UI

[bricealbiol]

Issue #5619
Previously, using only getHeightPerLine() for centering calculations caused text to appear offset because it included line padding. By introducing getHeightPerGlyph(), we can now center text based on the visual bounds of the characters.

• IGUIFont.h & CGUIFont.h: Added getHeightPerGlyph() to the font interface to retrieve the actual height of characters without line spacing.

• GlyphLayout.h: Updated getGlyphLayoutsDimension to accept height_per_glyph as a parameter for more accurate dimension calculations.

• CGUIButton.cpp: Improved the centering logic in draw() to use the new glyph height, ensuring text is vertically centered within buttons.

• CGUIStaticText.cpp: Adjusted height and width calculations to account for the difference between line height and glyph height.

• FontWithFace: Added m_glyph_max_above and m_glyph_max_below to track precise font metrics (ascender/descender) via FreeType.

• ScalableFont: Implemented getHeightPerGlyph() for STK's scalable font system, including support for borders and shadows.

• GUI Components: Updated CGUIEditBox, MessageQueue, NetworkingLobby, and RaceResultGUI to use the new dimension logic.

Technical Background: Bearing vs. Height

To fix the vertical alignment, I've distinguished between the line height and the visual glyph metrics. As explained in the FreeType documentation:

• Line Height (Height): The distance between two consecutive baselines. It often includes internal leading/padding, which causes "centering" logic to look offset.
• Glyph Bearing/Bounding Box: This represents the actual ink of the characters.

By implementing getHeightPerGlyph() (based on the max ascender and descender metrics), we ensure that UI elements like buttons and the Football score are centered based on the visible part of the text rather than the theoretical line height.

Agreement

By creating a pull request in stk-code, you hereby agree to dual-license your contribution as
GNU General Public License version 3 or any later version and
Mozilla Public License version 2 or any later version.

This includes your previous contribution(s) under the same name of contributor.

Keep the above statement in the pull request comment for agreement.

[GustaLOLE]

@bricealbiol, I tested your PR, but I cannot see difference between your code and the actual code in the soccer setup screen. You are finishing this yet?

[bricealbiol]

Hello @GustaLOLE,
Without my code in the team selection screen when choosing soccer mode, the text “Use left/right to choose your team and press fire” is not centered in the div as shown in the attached screen in the issue, and with this code it is.

[GustaLOLE]

I see you don't edited the soccer setup file, why? And send us images with this screen, please.

[GustaLOLE]

@bricealbiol Can you send this PR to my fork, pls?

[bricealbiol]

The image above represents with the code, the text “Use left/right to choose your team and press fire” is centered.

The reason I didn't edit the soccer setup file directly is that the misalignment wasn't caused by incorrect coordinates in that specific file, but by how the engine calculated text dimensions.

[bricealbiol]

How can i send this PR in your fork pls ?
I rarely use GitHub, sorry...

[GustaLOLE]

Send a PR in (https://github.com/GustaLOLE/stk-code) as the same way of you send here

[pedropaulosuzuki]

@bricealbiol Can you send this PR to my fork, pls?

@GustaLOLE You can just pull the commits once this is merged upstream. Better than having contributors do everything twice.

[GustaLOLE]

Ehm, Alayan will take time to put this maybe

[pedropaulosuzuki]

The image above represents with the code, the text “Use left/right to choose your team and press fire” is centered.

The reason I didn't edit the soccer setup file directly is that the misalignment wasn't caused by incorrect coordinates in that specific file, but by how the engine calculated text dimensions.

@bricealbiol Thanks for taking a look into this!

It seems the Continue button on your screenshot is also vertically misaligned, maybe this could also be fixed in the same patch?

Also, there is a small problem when aligning text based on the actual rendered height: anything containing characters that draw below the "text bottom line" (there's probably an official term for that) will make the text go up. Think any of these characters: "JQÇ" and "çgjpqy"). Also, if no capital letters are present (or taller characters, like "bdfhijklt") will bring the text down. The ideal way to align text vertically usually uses the height of the "capital X" character for that font at that size, in order to correctly align text without the issues presented in this paragraph.

Edit: by the code, it seems it samples the character 'A', so all good in that regard.

[pedropaulosuzuki]

@bricealbiol it seems the "Continue" button was correctly aligned before the patch, so it seems to be a regression.

Before patch:

[bricealbiol]

Yes, actually, without the modifications to the file lib/irrlicht/source/Irrlicht/CGUIButton.cpp, the text on the “continue” button is completely misaligned. I saw it in the middle, but it doesn't actually appear to be centered.