Skip to content

Commit 51082d2

Browse files
nicbarkernicbarker
authored
Change lineSpacing text config attribute to lineHeight (#37)
1 parent 26013e6 commit 51082d2

File tree

5 files changed

+23
-17
lines changed

5 files changed

+23
-17
lines changed

‎README.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -968,7 +968,7 @@ Clay_TextElementConfig {
968968
uint16_t fontId;
969969
uint16_t fontSize;
970970
uint16_t letterSpacing;
971-
uint16_t lineSpacing;
971+
uint16_t lineHeight;
972972
Clay_TextElementConfigWrapMode wrapMode {
973973
CLAY_TEXT_WRAP_WORDS (default),
974974
CLAY_TEXT_WRAP_NEWLINES,
@@ -1024,11 +1024,11 @@ Font size is generally thought of as `x pixels tall`, but interpretation is left
10241024
10251025
---
10261026
1027-
**`.lineSpacing`**
1027+
**`.lineHeight`**
10281028
1029-
`CLAY_TEXT_CONFIG(.lineSpacing = 1)`
1029+
`CLAY_TEXT_CONFIG(.lineHeight = 20)`
10301030
1031-
`.lineSpacing` results in **vertical** white space between lines of text (from both `\n` characters and text wrapping) and will affect layout of parents and siblings.
1031+
`.lineHeight` - when non zero - forcibly sets the `height` of each wrapped line of text to `.lineheight` pixels tall. Will affect the layout of both parents and siblings. A value of `0` will use the measured height of the font.
10321032
10331033
---
10341034

‎clay.h

+16-10
Original file line numberDiff line numberDiff line change
@@ -252,7 +252,7 @@ typedef struct
252252
uint16_t fontId;
253253
uint16_t fontSize;
254254
uint16_t letterSpacing;
255-
uint16_t lineSpacing;
255+
uint16_t lineHeight;
256256
Clay_TextElementConfigWrapMode wrapMode;
257257
#ifdef CLAY_EXTEND_CONFIG_TEXT
258258
CLAY_EXTEND_CONFIG_TEXT
@@ -1965,17 +1965,18 @@ void Clay__CalculateFinalLayout() {
19651965
// Clone the style config to prevent pollution of other elements that share this config
19661966
containerElement->layoutConfig = Clay__LayoutConfigArray_Add(&Clay__layoutConfigs, *containerElement->layoutConfig);
19671967
containerElement->layoutConfig->layoutDirection = CLAY_TOP_TO_BOTTOM;
1968-
containerElement->layoutConfig->childGap = textConfig->lineSpacing;
19691968
containerElement->children = CLAY__INIT(Clay__LayoutElementChildren) { // Note: this overwrites the text property
19701969
.elements = &Clay__layoutElementChildren.internalArray[Clay__layoutElementChildren.length],
19711970
.length = 0,
19721971
};
19731972
// Short circuit all wrap calculations if wrap mode is none
19741973
if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE || (containerElement->dimensions.width == textElementData->preferredDimensions.width && textConfig->wrapMode != CLAY_TEXT_WRAP_NEWLINES)) {
1974+
float lineHeight = textConfig->lineHeight != 0 ? textConfig->lineHeight : textElementData->preferredDimensions.height;
19751975
Clay_LayoutElementArray_Add(&Clay__layoutElements, CLAY__INIT(Clay_LayoutElement) {
19761976
.text = text,
1977-
.dimensions = textElementData->preferredDimensions,
1978-
.layoutConfig = &CLAY_LAYOUT_DEFAULT,
1977+
.dimensions = { textElementData->preferredDimensions.width, lineHeight },
1978+
.minDimensions = textElementData->preferredDimensions,
1979+
.layoutConfig = CLAY_LAYOUT(.sizing = { .height = CLAY_SIZING_FIXED(lineHeight) }),
19791980
.elementConfig = { .textElementConfig = containerElement->elementConfig.textElementConfig },
19801981
.id = Clay__RehashWithNumber(containerElement->id, containerElement->children.length),
19811982
.elementType = CLAY__LAYOUT_ELEMENT_TYPE_TEXT,
@@ -2028,15 +2029,17 @@ void Clay__CalculateFinalLayout() {
20282029
wordStartIndex = lineStartIndex;
20292030
wordEndIndex = lineStartIndex;
20302031
}
2032+
float lineHeight = textConfig->lineHeight != 0 ? textConfig->lineHeight : lineDimensions.height;
20312033
Clay_LayoutElementArray_Add(&Clay__layoutElements, CLAY__INIT(Clay_LayoutElement) {
20322034
.text = stringToRender,
2033-
.dimensions = { lineDimensions.width, lineDimensions.height },
2034-
.layoutConfig = &CLAY_LAYOUT_DEFAULT,
2035+
.dimensions = { lineDimensions.width, lineHeight },
2036+
.minDimensions = { lineDimensions.width, lineDimensions.height },
2037+
.layoutConfig = CLAY_LAYOUT(.sizing = { .height = CLAY_SIZING_FIXED(lineHeight) }),
20352038
.elementConfig = { .textElementConfig = containerElement->elementConfig.textElementConfig },
20362039
.id = Clay__RehashWithNumber(containerElement->id, containerElement->children.length),
20372040
.elementType = CLAY__LAYOUT_ELEMENT_TYPE_TEXT,
20382041
});
2039-
containerElement->dimensions.height += lineDimensions.height + (float)(containerElement->children.length > 0 ? textConfig->lineSpacing : 0);
2042+
containerElement->dimensions.height += lineHeight;
20402043
containerElement->children.length++;
20412044
lineDimensions = CLAY__INIT(Clay_Dimensions) {};
20422045
Clay__int32_tArray_Add(&Clay__layoutElementChildren, (int32_t)Clay__layoutElements.length - 1);
@@ -2259,6 +2262,9 @@ void Clay__CalculateFinalLayout() {
22592262
}
22602263
case CLAY_RENDER_COMMAND_TYPE_TEXT: {
22612264
renderCommand.text = currentElement->text;
2265+
if (currentElement->minDimensions.height != currentElement->dimensions.height) {
2266+
renderCommand.boundingBox.y += (currentElement->dimensions.height - currentElement->minDimensions.height) / 2;
2267+
}
22622268
break;
22632269
}
22642270
case CLAY_RENDER_COMMAND_TYPE_BORDER: { // We render borders on close because they need to render above children
@@ -2903,9 +2909,9 @@ void Clay__RenderDebugView() {
29032909
// .fontId
29042910
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 2), CLAY_STRING("Font ID"), infoTitleConfig);
29052911
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 2), Clay__IntToString(textConfig->fontId), infoTextConfig);
2906-
// .lineSpacing
2907-
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 3), CLAY_STRING("Line Spacing"), infoTitleConfig);
2908-
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 3), Clay__IntToString(textConfig->lineSpacing), infoTextConfig);
2912+
// .lineHeight
2913+
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 3), CLAY_STRING("Line Height"), infoTitleConfig);
2914+
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 3), textConfig->lineHeight == 0 ? CLAY_STRING("Auto") : Clay__IntToString(textConfig->lineHeight), infoTextConfig);
29092915
// .letterSpacing
29102916
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 4), CLAY_STRING("Letter Spacing"), infoTitleConfig);
29112917
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 4), Clay__IntToString(textConfig->letterSpacing), infoTextConfig);

‎examples/raylib-sidebar-scrolling-container/main.c

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ Clay_RenderCommandArray CreateLayout() {
7373

7474
CLAY_TEXT(CLAY_ID("BodyText2"),
7575
CLAY_STRING("Faucibus purus in massa tempor nec. Nec ullamcorper sit amet risus nullam eget felis eget nunc. Diam vulputate ut pharetra sit amet aliquam id diam. Lacus suspendisse faucibus interdum posuere lorem. A diam sollicitudin tempor id. Amet massa vitae tortor condimentum lacinia. Aliquet nibh praesent tristique magna."),
76-
CLAY_TEXT_CONFIG(.fontSize = 24, .lineSpacing = 20, .textColor = {0,0,0,255}));
76+
CLAY_TEXT_CONFIG(.fontSize = 24, .lineHeight = 60, .textColor = {0,0,0,255}));
7777

7878
CLAY_TEXT(CLAY_ID("BodyText3"),
7979
CLAY_STRING("Suspendisse in est ante in nibh. Amet venenatis urna cursus eget nunc scelerisque viverra. Elementum sagittis vitae et leo duis ut diam quam nulla. Enim nulla aliquet porttitor lacus. Pellentesque habitant morbi tristique senectus et. Facilisi nullam vehicula ipsum a arcu cursus vitae.\nSem fringilla ut morbi tincidunt. Euismod quis viverra nibh cras pulvinar mattis nunc sed. Velit sed ullamcorper morbi tincidunt ornare massa. Varius quam quisque id diam vel quam. Nulla pellentesque dignissim enim sit amet venenatis. Enim lobortis scelerisque fermentum dui faucibus in. Pretium viverra suspendisse potenti nullam ac tortor vitae. Lectus vestibulum mattis ullamcorper velit sed. Eget mauris pharetra et ultrices neque ornare aenean euismod elementum. Habitant morbi tristique senectus et. Integer vitae justo eget magna fermentum iaculis eu. Semper quis lectus nulla at volutpat diam. Enim praesent elementum facilisis leo. Massa vitae tortor condimentum lacinia quis vel."),

‎renderers/web/canvas2d/clay-canvas2d-renderer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
{ name: 'fontId', type: 'uint16_t' },
111111
{ name: 'fontSize', type: 'uint16_t' },
112112
{ name: 'letterSpacing', type: 'uint16_t' },
113-
{ name: 'lineSpacing', type: 'uint16_t' },
113+
{ name: 'lineHeight', type: 'uint16_t' },
114114
{ name: 'wrapMode', type: 'uint32_t' },
115115
{ name: 'disablePointerEvents', type: 'uint8_t' }
116116
]

‎renderers/web/html/clay-html-renderer.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@
128128
{ name: 'fontId', type: 'uint16_t' },
129129
{ name: 'fontSize', type: 'uint16_t' },
130130
{ name: 'letterSpacing', type: 'uint16_t' },
131-
{ name: 'lineSpacing', type: 'uint16_t' },
131+
{ name: 'lineHeight', type: 'uint16_t' },
132132
{ name: 'disablePointerEvents', type: 'uint8_t' }
133133
]
134134
};

0 commit comments

Comments
 (0)