[Renderers/Raylib] Raylib_MeasureText returning an incorrect result when called on text with letterSpacing, causing weird layouting

[angelcaru]

Simple reproduction:

#define CLAY_IMPLEMENTATION
#include "clay.h"

#include "clay_renderer_raylib.c"

void onerror(Clay_ErrorData error) {
    fprintf(stderr, "Clay error: %.*s", error.errorText.length, error.errorText.chars);
    exit(1);
}

#define WIDTH 640
#define HEIGHT 480

int main(void) {
    uint64_t total_memory_size = Clay_MinMemorySize();
    Clay_Arena arena = Clay_CreateArenaWithCapacityAndMemory(total_memory_size, malloc(total_memory_size));

    SetConfigFlags(FLAG_WINDOW_RESIZABLE);
    InitWindow(WIDTH, HEIGHT, "Clay Hello World");

    Font fonts[] = { GetFontDefault() };
    Clay_Initialize(arena, (Clay_Dimensions) { WIDTH, HEIGHT }, (Clay_ErrorHandler) { onerror, 0 });
    Clay_SetMeasureTextFunction(Raylib_MeasureText, fonts);

    while (!WindowShouldClose()) {
        Clay_SetLayoutDimensions((Clay_Dimensions) { GetScreenWidth(), GetScreenHeight() });
        Clay_SetPointerState((Clay_Vector2) { GetMouseX(), GetMouseY() }, IsMouseButtonDown(MOUSE_BUTTON_LEFT));
        Vector2 wheel = GetMouseWheelMoveV();
        Clay_UpdateScrollContainers(true, (Clay_Vector2) { wheel.x, wheel.y }, GetFrameTime());
        Clay_BeginLayout();
        CLAY({
            .id = CLAY_ID("HelloWorld"),
            //.layout.layoutDirection = CLAY_TOP_TO_BOTTOM,
            .layout.sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() },
            .backgroundColor = {24, 24, 24, 255},
        }) {
            uint16_t font_size = 50;
            Clay_TextElementConfig *config = CLAY_TEXT_CONFIG({.fontSize = font_size, .textColor = {255, 255, 255, 255}, .letterSpacing = font_size / 10 });
            CLAY_TEXT(CLAY_STRING("Hello, World!"), config);
            CLAY_TEXT(CLAY_STRING("Foo, Bar!"), config);
        }
        Clay_RenderCommandArray commands = Clay_EndLayout();

        BeginDrawing();
        Clay_Raylib_Render(commands, fonts);
        EndDrawing();
    }

    CloseWindow();
}

The output of this code looks like this:

[SAOMDVN]

So I encountered a somewhat similar issue when working on Raylib binding for Nuklear https://github.com/RobLoach/raylib-nuklear/issues/53, the solution at the time was to add one more unit by fontHeight / 10.0f. I'm not sure if this will help but may be you can try that?

[nicbarker]

Thanks for reporting this! I'll take a look 🙂

[angelcaru]

Update: This seems to only affect the default raylib font