sak
sak

Reputation: 3287

What's the best way to have two Text elements of different sizes line up on the same baseline?

I have two text views of different font sizes, and I want them to line up on the same baseline. I.e:


HStack {
    Text("100").font(.largeTitle)
    Text("kg")
}

And here I want 100 and kg to line up as if they are text on the same line, even though the font sizes are different.

I have tried setting alignment: .bottom on the HStack, but obviously this aligns the bottoms of the text views, not the font baseline.

Is there an elegant way to achieve this?

Upvotes: 0

Views: 100

Answers (1)

Asperi
Asperi

Reputation: 257711

I assume you wanted this one

HStack(alignment: .firstTextBaseline) {   // << here !!
    Text("100").font(.largeTitle)
    Text("kg")
}

enter image description here

Upvotes: 1

Related Questions