swift - SwiftUI offset Text() by font size

Question

How can I offset a Text such that exactly splits in the middle of the character. The problem that I face is that the character is not split nicely. What I have so far:

Text("8")
    .font(.system(size: size, design: fontDesign))
    .foregroundColor(fontColor)
    .offset(x: 0, y: size/2)
    .frame(width: size, height: size/2, alignment: .bottom)
    .background(Color.black)
    .clipShape(Rectangle())

Text("8")
    .font(.system(size: size, design: fontDesign))
    .foregroundColor(fontColor)
    .offset(x: 0, y: -size/2)
    .frame(width: size, height: size/2, alignment: .top)
    .background(Color.black)
    .clipShape(Rectangle())

This produces the following output:

I know that I can adjust the offset such that it aligns nicely (with size=50, the y-offset would be 36 resp. -36 to align it). However, the size must be variable. How can this be done?

Answer 1

Here's an example that seems to be working. For each Text(), set the frame @ 100% and then add a 2nd frame, cutting the first frame in half and aligning to .top / .bottom.

struct AlignmentTest: View {
    
    let size: CGFloat = 36
    let fontDesign = Font.Design.default
    let fontColor = Color.black
    let lineHeight: CGFloat = 100
    let text: String = "This is a TEST run! 888"
    
    var body: some View {
        VStack(spacing: 0) {
            Text(text)
                .font(.system(size: size, design: fontDesign))
                .foregroundColor(fontColor)
                .frame(height: lineHeight / 2) // frame1: Set height @ 100%
                .background(Color.red)
                .frame(height: lineHeight / 4, alignment: .top) // frame2: Cut frame1 half & align to top
                .clipped() // Clip result to frame2

            Text(text)
                .font(.system(size: size, design: fontDesign))
                .foregroundColor(fontColor)
                .frame(height: lineHeight / 2)
                .background(Color.blue)
                .frame(height: lineHeight / 4, alignment: .bottom)
                .clipped()
        }
    }
}

Output: