Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change lineSpacing text config attribute to lineHeight #37

Merged
merged 2 commits into from
Oct 5, 2024
Merged

Change lineSpacing text config attribute to lineHeight #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd88af8
Convert line spacing to line height
nicbarker Oct 4, 2024
c8fd09a
align text vertically within line height
nicbarker Oct 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -968,7 +968,7 @@ Clay_TextElementConfig {
uint16_t fontId;
uint16_t fontSize;
uint16_t letterSpacing;
uint16_t lineSpacing;
uint16_t lineHeight;
Clay_TextElementConfigWrapMode wrapMode {
CLAY_TEXT_WRAP_WORDS (default),
CLAY_TEXT_WRAP_NEWLINES,
Expand Down Expand Up @@ -1024,11 +1024,11 @@ Font size is generally thought of as `x pixels tall`, but interpretation is left

---

**`.lineSpacing`**
**`.lineHeight`**

`CLAY_TEXT_CONFIG(.lineSpacing = 1)`
`CLAY_TEXT_CONFIG(.lineHeight = 20)`

`.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.
`.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.

---

Expand Down
26 changes: 16 additions & 10 deletions clay.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ typedef struct
uint16_t fontId;
uint16_t fontSize;
uint16_t letterSpacing;
uint16_t lineSpacing;
uint16_t lineHeight;
Clay_TextElementConfigWrapMode wrapMode;
#ifdef CLAY_EXTEND_CONFIG_TEXT
CLAY_EXTEND_CONFIG_TEXT
Expand Down Expand Up @@ -1965,17 +1965,18 @@ void Clay__CalculateFinalLayout() {
// Clone the style config to prevent pollution of other elements that share this config
containerElement->layoutConfig = Clay__LayoutConfigArray_Add(&Clay__layoutConfigs, *containerElement->layoutConfig);
containerElement->layoutConfig->layoutDirection = CLAY_TOP_TO_BOTTOM;
containerElement->layoutConfig->childGap = textConfig->lineSpacing;
containerElement->children = CLAY__INIT(Clay__LayoutElementChildren) { // Note: this overwrites the text property
.elements = &Clay__layoutElementChildren.internalArray[Clay__layoutElementChildren.length],
.length = 0,
};
// Short circuit all wrap calculations if wrap mode is none
if (textConfig->wrapMode == CLAY_TEXT_WRAP_NONE || (containerElement->dimensions.width == textElementData->preferredDimensions.width && textConfig->wrapMode != CLAY_TEXT_WRAP_NEWLINES)) {
float lineHeight = textConfig->lineHeight != 0 ? textConfig->lineHeight : textElementData->preferredDimensions.height;
Clay_LayoutElementArray_Add(&Clay__layoutElements, CLAY__INIT(Clay_LayoutElement) {
.text = text,
.dimensions = textElementData->preferredDimensions,
.layoutConfig = &CLAY_LAYOUT_DEFAULT,
.dimensions = { textElementData->preferredDimensions.width, lineHeight },
.minDimensions = textElementData->preferredDimensions,
.layoutConfig = CLAY_LAYOUT(.sizing = { .height = CLAY_SIZING_FIXED(lineHeight) }),
.elementConfig = { .textElementConfig = containerElement->elementConfig.textElementConfig },
.id = Clay__RehashWithNumber(containerElement->id, containerElement->children.length),
.elementType = CLAY__LAYOUT_ELEMENT_TYPE_TEXT,
Expand Down Expand Up @@ -2028,15 +2029,17 @@ void Clay__CalculateFinalLayout() {
wordStartIndex = lineStartIndex;
wordEndIndex = lineStartIndex;
}
float lineHeight = textConfig->lineHeight != 0 ? textConfig->lineHeight : lineDimensions.height;
Clay_LayoutElementArray_Add(&Clay__layoutElements, CLAY__INIT(Clay_LayoutElement) {
.text = stringToRender,
.dimensions = { lineDimensions.width, lineDimensions.height },
.layoutConfig = &CLAY_LAYOUT_DEFAULT,
.dimensions = { lineDimensions.width, lineHeight },
.minDimensions = { lineDimensions.width, lineDimensions.height },
.layoutConfig = CLAY_LAYOUT(.sizing = { .height = CLAY_SIZING_FIXED(lineHeight) }),
.elementConfig = { .textElementConfig = containerElement->elementConfig.textElementConfig },
.id = Clay__RehashWithNumber(containerElement->id, containerElement->children.length),
.elementType = CLAY__LAYOUT_ELEMENT_TYPE_TEXT,
});
containerElement->dimensions.height += lineDimensions.height + (float)(containerElement->children.length > 0 ? textConfig->lineSpacing : 0);
containerElement->dimensions.height += lineHeight;
containerElement->children.length++;
lineDimensions = CLAY__INIT(Clay_Dimensions) {};
Clay__int32_tArray_Add(&Clay__layoutElementChildren, (int32_t)Clay__layoutElements.length - 1);
Expand Down Expand Up @@ -2259,6 +2262,9 @@ void Clay__CalculateFinalLayout() {
}
case CLAY_RENDER_COMMAND_TYPE_TEXT: {
renderCommand.text = currentElement->text;
if (currentElement->minDimensions.height != currentElement->dimensions.height) {
renderCommand.boundingBox.y += (currentElement->dimensions.height - currentElement->minDimensions.height) / 2;
}
break;
}
case CLAY_RENDER_COMMAND_TYPE_BORDER: { // We render borders on close because they need to render above children
Expand Down Expand Up @@ -2903,9 +2909,9 @@ void Clay__RenderDebugView() {
// .fontId
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 2), CLAY_STRING("Font ID"), infoTitleConfig);
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 2), Clay__IntToString(textConfig->fontId), infoTextConfig);
// .lineSpacing
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 3), CLAY_STRING("Line Spacing"), infoTitleConfig);
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 3), Clay__IntToString(textConfig->lineSpacing), infoTextConfig);
// .lineHeight
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 3), CLAY_STRING("Line Height"), infoTitleConfig);
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 3), textConfig->lineHeight == 0 ? CLAY_STRING("Auto") : Clay__IntToString(textConfig->lineHeight), infoTextConfig);
// .letterSpacing
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontTitle", 4), CLAY_STRING("Letter Spacing"), infoTitleConfig);
CLAY_TEXT(CLAY_IDI("Clay__DebugViewElementInfoRectangleFontBody", 4), Clay__IntToString(textConfig->letterSpacing), infoTextConfig);
Expand Down
2 changes: 1 addition & 1 deletion examples/raylib-sidebar-scrolling-container/main.c
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ Clay_RenderCommandArray CreateLayout() {

CLAY_TEXT(CLAY_ID("BodyText2"),
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."),
CLAY_TEXT_CONFIG(.fontSize = 24, .lineSpacing = 20, .textColor = {0,0,0,255}));
CLAY_TEXT_CONFIG(.fontSize = 24, .lineHeight = 60, .textColor = {0,0,0,255}));

CLAY_TEXT(CLAY_ID("BodyText3"),
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."),
Expand Down
2 changes: 1 addition & 1 deletion renderers/web/canvas2d/clay-canvas2d-renderer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@
{ name: 'fontId', type: 'uint16_t' },
{ name: 'fontSize', type: 'uint16_t' },
{ name: 'letterSpacing', type: 'uint16_t' },
{ name: 'lineSpacing', type: 'uint16_t' },
{ name: 'lineHeight', type: 'uint16_t' },
{ name: 'wrapMode', type: 'uint32_t' },
{ name: 'disablePointerEvents', type: 'uint8_t' }
]
Expand Down
2 changes: 1 addition & 1 deletion renderers/web/html/clay-html-renderer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@
{ name: 'fontId', type: 'uint16_t' },
{ name: 'fontSize', type: 'uint16_t' },
{ name: 'letterSpacing', type: 'uint16_t' },
{ name: 'lineSpacing', type: 'uint16_t' },
{ name: 'lineHeight', type: 'uint16_t' },
{ name: 'disablePointerEvents', type: 'uint8_t' }
]
};
Expand Down