From 4ecba0c61ac16e5915ca49f3b3663248b19998dd Mon Sep 17 00:00:00 2001 From: Luke 10X Date: Wed, 7 Jan 2026 00:26:02 -0500 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9E=20Fix=20font=20measurement=20in=20?= =?UTF-8?q?GLES3=20Clay=20renderer=20with=20stb=20font=20library.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix incorrect font data access in Stb_MeasureText. - Ensure that appropriate font data is used in Stb_MeasureText (as specified in config.fontId) - Before this fix it was always using the data of the first font in Stb_MeasureText, which was not always correct. --- .../main.c | 18 ++++++++++++++++++ .../GLES3/clay_renderer_gles3_loader_stb.c | 4 +++- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/examples/GLES3-SDL2-sidebar-scrolling-container/main.c b/examples/GLES3-SDL2-sidebar-scrolling-container/main.c index 8e480b8..cb9dede 100644 --- a/examples/GLES3-SDL2-sidebar-scrolling-container/main.c +++ b/examples/GLES3-SDL2-sidebar-scrolling-container/main.c @@ -225,6 +225,7 @@ void RenderDropdownTextItem(int index) const uint32_t FONT_ID_BODY_24 = 1; Clay_String profileText = CLAY_STRING_CONST("Profile Page one two three four five six seven eight nine ten eleven twelve thirteen fourteen fifteen"); +Clay_String rightAlignedText = CLAY_STRING_CONST("Right aligned text in various fonts"); void RenderHeaderButton1(Clay_String text) { @@ -350,6 +351,23 @@ Clay_RenderCommandArray CreateLayout(void) CLAY(CLAY_ID("Picture6.5"), {.layout = {.sizing = {.width = CLAY_SIZING_FIXED(100), .height = CLAY_SIZING_FIXED(120)}}, .image = {.imageData = &g_window4}}) {} } + // To test that fonts are spaced well and using their appropriate data for the width function put 2 titles side by side + // Align them to the right to make it immediately obvious if sizing is not matching the font config + CLAY(CLAY_ID("RightAlignedBlock"), {.layout = {.layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}, .childGap = 16, .padding = {16, 16, 16, 16}}, .backgroundColor = {180, 180, 220, (float)(Clay_Hovered() ? 120 : 255)}}) + { + CLAY(CLAY_ID("RightText1"), {.layout = {.layoutDirection = CLAY_LEFT_TO_RIGHT, .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}}, .backgroundColor = {180, 180, 220, 255}}) + { + CLAY(CLAY_ID("RightText1Spacer"), {.layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}},}) {} + CLAY_TEXT(rightAlignedText, CLAY_TEXT_CONFIG({.fontSize = 24, .textColor = {0, 0, 0, 255}, .textAlignment = CLAY_TEXT_ALIGN_RIGHT})); + + } + CLAY(CLAY_ID("RightText2"), {.layout = {.layoutDirection = CLAY_LEFT_TO_RIGHT, .sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}}, .backgroundColor = {180, 180, 220, 255}}) + { + CLAY(CLAY_ID("RightText2Spacer"), {.layout = {.sizing = {.width = CLAY_SIZING_GROW(0), .height = CLAY_SIZING_GROW(0)}},}) {} + CLAY_TEXT(rightAlignedText, CLAY_TEXT_CONFIG({.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {0, 0, 0, 255}, .textAlignment = CLAY_TEXT_ALIGN_RIGHT})); + } + } + Clay_String cs = {.isStaticallyAllocated = false, .length = g_glInfoTextLen, .chars = g_glInfoText}; Clay_TextElementConfig glInfoElementConfig = {.fontId = FONT_ID_BODY_24, .fontSize = 24, .textColor = {255, 255, 255, 255}}; CLAY_TEXT(cs, &glInfoElementConfig); diff --git a/renderers/GLES3/clay_renderer_gles3_loader_stb.c b/renderers/GLES3/clay_renderer_gles3_loader_stb.c index b98da72..f30d1ae 100644 --- a/renderers/GLES3/clay_renderer_gles3_loader_stb.c +++ b/renderers/GLES3/clay_renderer_gles3_loader_stb.c @@ -188,7 +188,9 @@ static inline Clay_Dimensions Stb_MeasureText( Clay_TextElementConfig *config, void *userData) { - Stb_FontData *fontData = (Stb_FontData *)userData; + // Use fontData of specified font + Stb_FontData *allFontData = (Stb_FontData *)userData; + Stb_FontData *fontData = &allFontData[config->fontId]; if (!fontData->cdata) {