Layout size calculations and fixed font sizes

[xentec]

I am developing a GUI with tabular grid layout and have been struggling to put consistent column element sizes due to fixed text sizes.

As I can see it, pretty much every element tries to take as much space as possible by default, but Text. Texts use default-font-size parameter from Window, which makes them fixed-size by default and deviate from the rest.
This is one design choice I don't understand in Slint: Why shouldn't Text also be restricted just by its container element?
Since Window cannot be infinite (due to ressource limits), the whole space is already constrained and only needs to be partitioned. The limitation of the layout tree comes from above.
Therefore Text elements only need to take up the space given to them, right?

There can be out-of-tree elements, but these we can detect and enforce fixed geometry.
Same with Flickable, which is pseudo-infinite and would blow up everything inside it, but then again we can put restrictions on its inner space based on the outer one.

Sorry if I sound frustrated: I've seen some well thought out layout systems in the past and I want to like Slint, since it is based on a modern, type-safe language and targets embedded systems. But the aforementioned design choices seem surprisingly inconsistent.

[ogoffart]

The layouting system propagates restrictions outwards, and then dimensions inwards.
Some elements are expanding (like Rectangle), and some elements are not expanding (like Text)

Maybe you need to use the vertical-stretch or horizontal-stretch property explicitly. I assume you've seen https://docs.rs/slint/latest/slint/docs/layouting/index.html#stretch-algorithm
Or maybe you want to explicitly set width: 100%; height: 100%;

Why shouldn't Text also be restricted just by its container element?

I'm not sure what you means exactly, but that's because Text has a implicit size (which is the size of the text).

Maybe a sample of code of what you're trying to do would help to understand.

[ogoffart]

But doesn't this conflict, because the application window is always a restriction?

The application window can be resized.
The layout engine will first compute the maximum size and the minimum size of the window based on the contents (widgets, texts, ....), and tell the WM what are the restrictions so the WM will not allow resizing the window too small or too big.
Then, once we have a window, the layout will layout its inner item.
Within a layout there may be extra rerstriction. For example, if you have a Text, and then a LineEdit, the LineEdit can stretch as much as it wants, but the text will prefer to have its natural size. This can be configured with the horizontal-stretch property.

For example I need to put max-width: 10000px; into Window, otherwise it limits itself to the smallest possible size and stays static (which is unsual for me).

It is true that it will default to the smallest possible size.
You can set the preferred-width property to specify which size the window should have when it is shown.
By default, the preferred size is indeed the minimum size.

Couldn't the line height of Text adapt itself to fit all the text into that Rectangle?

Ah, i see what you mean now.
You could set a binding on the font-size such as font-size: height; or something similar.
Maybe @tronical will know how to achieve the desired effect.

Since I am trying to emulate a variable GridLayout, its difficult for me to pick a sample, but I can link you the repo of my project.
https://github.com/fsim-ev/infoscreen-ng

Thanks. however i don't seem to have access to this repo (i get a 404)

[xentec]

Thanks. however i don't seem to have access to this repo (i get a 404)

Sorry about that, it's available now.

[tronical]

I think Olivier's suggestion of a font-size: height; is good and should work. Or is your Text element showing text with multiple lines?

[tronical]

For the use-case of squeezing all (multi-line) text into a given rectangle and adjusting the text size automatically, we would need some way of expressing that, like maybe font-size: auto;. But I'm not sure this is a good idea. Shouldn't the layout be usually work the other way around: The text size is given (it must be readable) and the UI elements around it grow accordingly?

I just had a similar discussion with @FloVanGH this morning about the size of Button elements and it seems to me that the text size should be the dominating factor for the overall height of a button.

[xentec]

@ogoffart

But doesn't this conflict, because the application window is always a restriction?

The application window can be resized. The layout engine will first compute the maximum size and the minimum size of the window based on the contents (widgets, texts, ....), and tell the WM what are the restrictions so the WM will not allow resizing the window too small or too big. Then, once we have a window, the layout will layout its inner item. Within a layout there may be extra rerstriction. For example, if you have a Text, and then a LineEdit, the LineEdit can stretch as much as it wants, but the text will prefer to have its natural size. This can be configured with the horizontal-stretch property.

For example I need to put max-width: 10000px; into Window, otherwise it limits itself to the smallest possible size and stays static (which is unsual for me).

It is true that it will default to the smallest possible size. You can set the preferred-width property to specify which size the window should have when it is shown. By default, the preferred size is indeed the minimum size.

Thanks, I think I know what my GridLayout emulation is missing: space buffers between columns, which may have infinite size. That way the window should become resizeable again without max-width hack.

Couldn't the line height of Text adapt itself to fit all the text into that Rectangle?

Ah, i see what you mean now. You could set a binding on the font-size such as font-size: height; or something similar. Maybe @tronical will know how to achieve the desired effect.

@tronical

I think Olivier's suggestion of a font-size: height; is good and should work. Or is your Text element showing text with multiple lines?

I did that in the lecture timetable multiple times, but the line heights never matched the height of the outer blocks, so I needed to put factors to align them size-wise, vertically and to introduce some paddings.
Font rendering will probably always be a hard challenge. 😅

For the use-case of squeezing all (multi-line) text into a given rectangle and adjusting the text size automatically, we would need some way of expressing that, like maybe font-size: auto;. But I'm not sure this is a good idea. Shouldn't the layout be usually work the other way around: The text size is given (it must be readable) and the UI elements around it grow accordingly?

I just had a similar discussion with @FloVanGH this morning about the size of Button elements and it seems to me that the text size should be the dominating factor for the overall height of a button.

I agree. Information elements should have priority.
But they should also be flexible. Text should grow with its outer elements. Maybe you could change default-font-size to min-font-size to allow Slint UIs to scale up by default.