Not possible to center text, TTF_GetTextSize returns wrong size

[aandrejevas]

I suspect TTF_GetTextSize is returning wrong size because I was not able to center text.
Code:

#define SDL_MAIN_USE_CALLBACKS true
#include <SDL3/SDL.h>
#include <SDL3/SDL_main.h>
#include <SDL3_ttf/SDL_ttf.h>

SDL_Window * window;
SDL_Renderer * renderer;
TTF_Font * font;
TTF_TextEngine * text_engine;
TTF_Text * text_object;

SDL_AppResult SDL_AppInit(void ** const, const int, char ** const) {
	SDL_SetHint(SDL_HINT_MAIN_CALLBACK_RATE, "10");
	TTF_Init();
	SDL_CreateWindowAndRenderer("test", 0, 0, SDL_WINDOW_FULLSCREEN, &window, &renderer);

	font = TTF_OpenFont("Ruler Stencil Heavy.ttf", 980);
	text_engine = TTF_CreateRendererTextEngine(renderer);
	text_object = TTF_CreateText(text_engine, font, "Ačiū", 0);

	return SDL_AppResult::SDL_APP_CONTINUE;
}

SDL_AppResult SDL_AppEvent(void * const, SDL_Event * const event) {
	switch (event->type) {
	case SDL_EventType::SDL_EVENT_QUIT:
		return SDL_AppResult::SDL_APP_SUCCESS;

	case SDL_EventType::SDL_EVENT_KEY_DOWN:
		switch (event->key.key) {
		case SDLK_ESCAPE:
			return SDL_AppResult::SDL_APP_SUCCESS;
		}
		break;
	}
	return SDL_AppResult::SDL_APP_CONTINUE;
}

SDL_AppResult SDL_AppIterate(void * const) {
	int window_width, window_height, text_width, text_height;
	SDL_GetWindowSizeInPixels(window, &window_width, &window_height);
	TTF_GetTextSize(text_object, &text_width, &text_height);
	TTF_DrawRendererText(text_object, (window_width - text_width) / 2, (window_height - text_height) / 2);

	SDL_RenderPresent(renderer);
	return SDL_AppResult::SDL_APP_CONTINUE;
}

void SDL_AppQuit(void * const, const SDL_AppResult) {
	TTF_Quit();
}

What is rendered:

As can be seen, on the left the letter A is cut off and on the right the letter ū does not reach the edge. Also the text is not vertically aligned. That means that the text is not centered and that means that TTF_GetTextSize returned wrong size.

Font (github does not let me add a .ttf file):
https://www.dafont.com/ruler-stencil.font

[SimonMaracine]

Hello.

That looks quite good to me. I'm pretty sure SDL_ttf actually calculates the text size correctly, and it's just the font being imperfect. Try a good monospace font instead, not a random one you found on the internet.

[aandrejevas]

@SimonMaracine
Well of course a monospace font is centerable. But non monospaced fonts should be centerable also.

I tried to center Arial font text. Here is the only line I changed (I also changed the background color for better visibility):

font = TTF_OpenFont("C:\\Windows\\Fonts\\arial.ttf", 1000);

Here is the result I got:

We see the same results as I described in my original post. The Arial font is most likely not at fault so I still think that the code is lacking.

I tried to center text with SFML and was able to do it with all these fonts.

[aandrejevas]

I actually just tried to center Courier New font (which is a monospaced font) text and I was not able to center it:

font = TTF_OpenFont("C:\\Windows\\Fonts\\cour.ttf", 830);

[SimonMaracine]

If you say that with SFML you get better results, then you're probably right that SDL_ttf calculates something off.

But I personally would still not expect from SDL_ttf to render pixel perfect text. If you do expect, on the other hand, I get that.

[SimonMaracine]

Obviously, SDL_ttf uses the TrueType library internally, so at least you know where to look for issues, assuming that TrueType works perfectly.

[aandrejevas]

Yeah, I tried some time ago to calculate the width of the text using TTF_GetGlyphMetrics and the info in https://freetype.org/freetype2/docs/glyphs/glyphs-3.html. And I was able to do it using this code:

constexpr std::string_view display_text = "Ačiū";

int get_text_width() {
	int text_w = 0;
	const char * pstr = display_text.data();
	while (const uint32_t codepoint = SDL_StepUTF8(&pstr, nullptr)) {
		int min_x, max_x, min_y, max_y, advance;
		TTF_GetGlyphMetrics(font, codepoint, &min_x, &max_x, &min_y, &max_y, &advance);
		if (!text_w) {
			// If first codepoint
			text_w += advance + min_x;
		} else if (pstr == display_text.end()) {
			// If last codepoint
			text_w += max_x;
		} else {
			text_w += advance;
		}
	}
	return text_w;
}
...
font = TTF_OpenFont("C:\\Windows\\Fonts\\cour.ttf", 810);
...
const int text_w = get_text_width();
TTF_DrawRendererText(text_object, (window_width - text_w) / 2, (window_height - text_height) / 2);

So I realized that the way the width is calculated now is, the advance fields are just summed up of each codepoint and that becomes the width. But that is wrong because the left side bearing of the first codepoint and the right side bearing of the last codepoint should not be counted towards the width. So that is why when we are analyzing the last codepoint, I add only max_x to the width. Now, when we are analyzing the first codepoint, if we would write text_w += advance - min_x then in the end we would get the true text width, but when we would try to use it, the text would not be centered because the bearings are included into the glyphs and they are displayed so we would need to account for that like this TTF_DrawRendererText(text_object, -first_bearing_x + (window_width - text_w) / 2, ...); where first_bearing_x is the first codepoint's min_x. Instead of that we just add to the width two times inside the width calculation function and we get text_w += advance + min_x.

I have not yet figured out how to calculate the height of the text so that it could be used to center it.

[aandrejevas]

SDL_Rect get_text_bbox(TTF_Font * const font, const std::string_view text) {
	int text_w = 0, left = 0, top = INT_MIN, bottom = INT_MAX;
	const char * pstr = text.data();

	while (const uint32_t codepoint = SDL_StepUTF8(&pstr, nullptr)) {
		int min_x, max_x, min_y, max_y, advance;
		TTF_GetGlyphMetrics(font, codepoint, &min_x, &max_x, &min_y, &max_y, &advance);
		if (!text_w) {
			text_w += advance - min_x;
			left = min_x;
		} else if (pstr == text.end()) {
			text_w += max_x;
		} else {
			text_w += advance;
		}
		bottom = std::min(bottom, min_y);
		top = std::max(top, max_y);
	}

	return {left, TTF_GetFontAscent(font) - top, text_w, top - bottom};
}

	int window_w, window_h;
	SDL_GetWindowSizeInPixels(window, &window_w, &window_h);
	SDL_Rect bbox = get_text_bbox(font, "Ačiū");

	SDL_FRect text_dst = {
		(float)((window_w - bbox.w) / 2 - bbox.x),
		(float)((window_h - bbox.h) / 2 - bbox.y),
		(float)(texture->w), (float)(texture->h)
	};

	SDL_RenderTexture(renderer, texture, nullptr, &text_dst);

I figured out how to center the text some time ago. This code correctly displays the text at the center of the window.

[SimonMaracine]

Recently I noticed that for small fonts, even a few pixels pose a big issue when trying to center the text, both vertically and horizontally. You were really right.