non-matching gui font size

[vinniec2]

Issue description

warning: I'm sorry, I want to report this, but since I haven't tested the examples in C but in Python, I can't be sure that the problem wasn't introduced by the bindings. However, I tried to create a very minimalist code that I think it's simple to replicate in C. I apologize for my lack of knowledge. I think that if I continue to use raylib in the future, I might as well try to switch to C since there is more material available.

the problem: Specifying a font with LoadFontEx and then GuiSetFont results in a font of GuiTextBox with a different size than using the same font directly with DrawTextEx at the same size.
Previously I ran some tests using a square monospace font and verified that DrawTextEx draws the font in the expected size (just configure a window with dimensions that are a multiple of the font size and check that the margins match).
So I think there may be a problem in raygui.
I did another test specifying the same size and overlapping the two text boxes, and I noticed that GuiTextBox seems to have more spacing between characters (even though the font size seems right, in previous tests I had noticed a discrepancy there too, I also wrote about it on Reddit, but I couldn't recreate this problem).

It's not a big problem, but this way I can't predict how much text will fit into a GUI element, so I have to make rough estimates (and it's a bit inconvenient when you want to create a parametrically scalable interface)

Environment

Archlinux derivative, the package from the repository works but being compiled for opengl 3.3 was not useful for me.

$ glxinfo | grep "OpenGL version"
OpenGL version string: 2.1 Mesa 24.1.1-arch1.1

I am not able to figure out what gpu i have, it is an intel integrated in a thinkpad x201t driver i915

Issue Screenshot

Here is the output of the example snippet. You can see that the text in the GuiTextBox (in gray in the background) expands more than that of DrawTextEx (in red in the foreground), even though they are the same size.

Code Example

import pyray as rl

mult = 1
swdt = 800*mult
shgt = 100*mult
tdim = int(swdt/10)
rl.init_window(swdt, shgt, "win")

font = rl.load_font_ex("square.ttf", 100, None, 0)
rl.gui_set_font(font)
rl.gui_set_style(rl.DEFAULT, rl.TEXT_SIZE, tdim)
text = "|||||||||"

while not rl.window_should_close():
    rl.begin_drawing()
    rl.clear_background(rl.BLACK)

    rl.gui_text_box(rl.Rectangle(0,0,swdt,shgt), text, 2, False)
    rl.draw_text_ex(font, text, [5, int(shgt*0.1)], tdim, 0, rl.RED)

    rl.end_drawing()

rl.close_window()

[raysan5]

@vinniec2 It seems there could be some inconsistencies on SPACING, not on font size. But you should try with the C version of the library, a binding can introduce that kind of inconsistencies while using float values.

[vinniec2]

@vinniec2 It seems there could be some inconsistencies on SPACING, not on font size. But you should try with the C version of the library, a binding can introduce that kind of inconsistencies while using float values.

sorry I didn't see you replied (actually I missed the email notification).
I'll try to figure out how to write it in c, but can the spacing in the default font be changed?

[vinniec2]

Okay, I'll answer myself: yes, it can be changed.
I was trying to translate the code into C, but since I'm inexperienced, I couldn't compile it.
I got the error: ex1.c:(.text+0xc5): undefined reference to GuiSetStyle'
So I looked at the raygui source code to be sure of what I was writing, I checked if I was using GuySetStyle correctly and realized that at line 4010, there's this:
GuiSetStyle(DEFAULT, TEXT_SPACING, 1); // DEFAULT, shared by all controls

Since I was having problems with C anyway (I certainly don't fully understand the inclusion and compilation process), I tried adding this code in Python, and the problem seems to have disappeared:
rl.gui_set_style(rl.DEFAULT, rl.TEXT_SPACING, 0)

So, without further testing, I have to say it's not a bug but a default interface style setting.

[vinniec2]

I kept experimenting because I still can't get the text written with DrawTextEx to match the text in GuiTextBox.
It seemed to work fine horizontally, but when I tried using multi-line text, it broke again.

I looked at the source code a bit and I ended up trying to change from my code the TEXT_LINE_SPACING and TEXT_PADDING, but I still didn't get the results I was hoping for.

The problems I noticed are:

1. There seems to be some sort of vertical alignment of the text inside the GuiTextBox but I can't find the setting.
2. I can't figure out what the GuiTextBox's textSize parameter is for. No matter what value I set, it doesn't change anything in the displaying. I think it just limits the number of characters allowed with the editMode active.
3. The font still seems resized. I accidentally found this line in the source code:
   float scaleFactor = (float)GuiGetStyle(DEFAULT, TEXT_SIZE)/(float)guiFont.baseSize;
   Maybe that "scaleFactor"
   has something to do with it?

I'm attaching a screenshot, although at this point I'm avoiding adding the code because it's in python, I'm not yet able to compile the code in C so I can't test it

as you can see the text in grey is the DrawTextEx while the one in red is the GuiTextBox (with the thick border), I would expect them to overlap but they are not.

[vinniec2]

With a little effort (I'm not a C programmer, so sorry if I messed up the code a bit), I managed to translate the code into C. I compiled it, and the result looks very similar (the problem is only vertical, horizontally it was my wrong setting).
I would expect the two texts to be aligned, but DrawTextEx in gray looks correct, and GuiTextBox in red is off-center toward the top.

This is how it looks (c version):

And this is the (ugly) C code:

#include "raylib.h"
#define RAYGUI_IMPLEMENTATION
#include "raygui.h"

typedef struct {
    char *name;
    int num;
    int val;
} Options;

Options options[] = {
    {"BORDER_COLOR_NORMAL", BORDER_COLOR_NORMAL, 0xda5757ff},
    {"BASE_COLOR_NORMAL", BASE_COLOR_NORMAL, 0x753233ff},
    {"TEXT_COLOR_NORMAL", TEXT_COLOR_NORMAL, 0xe17373ff},
    {"BORDER_COLOR_FOCUSED", BORDER_COLOR_FOCUSED, 0xfaaa97ff},
    {"BASE_COLOR_FOCUSED", BASE_COLOR_FOCUSED, 0xe06262ff},
    {"TEXT_COLOR_FOCUSED", TEXT_COLOR_FOCUSED, 0xfdb4aaff},
    {"BORDER_COLOR_PRESSED", BORDER_COLOR_PRESSED, 0xe03c46ff},
    {"BASE_COLOR_PRESSED", BASE_COLOR_PRESSED, 0x5b1e20ff},
    {"TEXT_COLOR_PRESSED", TEXT_COLOR_PRESSED, 0xc2474fff},
    {"BORDER_COLOR_DISABLED", BORDER_COLOR_DISABLED, 0xa19292ff},
    {"BASE_COLOR_DISABLED", BASE_COLOR_DISABLED, 0x706060ff},
    {"TEXT_COLOR_DISABLED", TEXT_COLOR_DISABLED, 0x9e8585ff},
    {"TEXT_SIZE", TEXT_SIZE, 0x0000000f},
    {"TEXT_SPACING", TEXT_SPACING, 0x00000000},
    {"LINE_COLOR", LINE_COLOR, 0xfb8170ff},
    {"BACKGROUND_COLOR", BACKGROUND_COLOR, 0x3a1720ff},
    {"TEXT_LINE_SPACING", TEXT_LINE_SPACING, 0x00000016},
};


int main() {
    InitWindow(800, 420, "win");
    SetTargetFPS(10);

    // font loading
    Font font = LoadFontEx("./square.ttf", 100, NULL, 0);
    GuiSetFont(font);
    int tsize = 20;

    // set styles
    int optdim = sizeof(options)/sizeof(options[0]);
    for (int i = 0; i < optdim; i++) {
        GuiSetStyle(DEFAULT, options[i].num, options[i].val);
    }
    // additional options
    GuiSetStyle(DEFAULT, TEXT_SIZE, tsize);
    GuiSetStyle(DEFAULT, TEXT_LINE_SPACING, tsize);
    GuiSetStyle(DEFAULT, TEXT_WRAP_MODE, 1); // 1 = rl.TEXT_WRAP_MODE
    GuiSetStyle(TEXTBOX, TEXT_ALIGNMENT, 0); // allineamento a destra
    GuiSetStyle(TEXTBOX, TEXT_PADDING, 0);
    GuiSetStyle(TEXTBOX, BORDER_WIDTH, tsize);


    //  Create output string
    char outp[663] = {0};
    for (int i = 0; i < optdim; i++) {
        int val = GuiGetStyle(DEFAULT, options[i].num);
        snprintf(outp + strlen(outp), sizeof(outp) - strlen(outp), "%3d %-22s %11u\n", options[i].num, options[i].name, val);
    }

    while (!WindowShouldClose()) {
        BeginDrawing();
        ClearBackground(BLACK);

        DrawTextEx(font, outp, (Vector2){tsize, tsize}, tsize, 0, GRAY);
        GuiTextBox((Rectangle){0, 0, 800, 420}, outp, 9999, false);

        EndDrawing();
    }

    UnloadFont(font);
    CloseWindow();

    return 0;
}

[vinniec2]

Found the solution but not the explanation:

1. It's necessary to set the vertical alignment to false
   GuiSetStyle(DEFAULT, TEXT_ALIGNMENT_VERTICAL, 0);
2. It's necessary to add 2 to the line spacing,
   GuiSetStyle(DEFAULT, TEXT_LINE_SPACING, tsize+2);

So the gui text is 2 (fixed value, it's no a dynamic value relative to the font dimension) shorter than DrawText's.
At the same times it seems to me that it is not possible to set the line spacing for DrawText.
I might prefer not to have to remember this exception, but I'm happy to be able to configure this as well.