slint-ui / slint

Slint is a declarative GUI toolkit to build native user interfaces for Rust, C++, or JavaScript apps.
https://slint.dev
Other
17.71k stars 614 forks source link

Add support for baseline alignment of widgets and text #6048

Open tronical opened 2 months ago

tronical commented 2 months ago

Currently it's not possible to align widgets on the baseline of text:

    HorizontalLayout {
        alignment: start;
        Text {
            text: "Text";
            vertical-alignment: center;
        }
        Text {
            text: "Large Text";
            font-size: 24px;
            vertical-alignment: center;
        }
        Button {
            text: "Button";
        }
        CheckBox {
            text: "Toggle";
            checked: true;
        }
    }

produces:

Screenshot 2024-10-07 at 15 36 06

slintpad

Instead, there should be a way to achieve baseline alignment, like for example in SwiftUI:

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .firstTextBaseline) {
            Text("Text")

            Text("Large Text")
                .font(.title)

            Button {} label: {
                Text("Button")
            }

            Toggle("Toggle", isOn: .constant(true))
        }
        .padding()
    }
}

#Preview {
    ContentView()
}
Screenshot 2024-10-07 at 15 37 23

--- old description: In conjunction with #6047 and following #5920, it would be useful if the location of the baseline where text will be initially rendered in a Text element could be specified with a property, say baseline. It might make sense to activate this only if we had say vertical-alignment: baseline;.

NigelBreslaw commented 2 months ago

This nicely solves the issues from the linked discussion!

tronical commented 1 month ago

6047 is done, and this would be the next issue to tackle.