NEW: Start my new Ultimate Portfolio App course with a free Hacking with Swift+ trial! >>

Text("") cutting subscript character

Forums > SwiftUI

Subscript character are cut like this: See screenshot

How could I dynamically add some height points to the Text element AFTER he loaded the text (because the text lines are very variables in number)?

Buttons are declared like this:

Button(action: {
        // Some actions...
        }, label: {

            ZStack {

                RoundedRectangle(cornerRadius: 10)
                    .fill(buttonColor)
                    .shadow(color: Color(#colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.05)), radius: 7, x: 0.0, y: 0.0)

                HStack {

                    Text(optionLetter)
                        .font(.custom("Lato-Bold", size: 17))
                        .foregroundColor(buttonTextColor)

                    Text(text)
                        .font(.custom("Lato-Regular", size: 17))
                        .foregroundColor(buttonTextColor)
                        .fixedSize(horizontal: false, vertical: true)
                        .lineLimit(nil)

                    Spacer()

                }
                .padding(10)

            }
            .frame(minHeight: 40)
        })

   

Have you tried to use .padding() instead of .frame(minHeight: 40)?

   

I tried but it gives the same result. It seems like SwiftUI does not calculate the subscript character space.

I tried also

GeometryReader { geometry in
    VStack {
        Text(text)
            .font(.custom("Lato-Regular", size: 17))
            .foregroundColor(buttonTextColor)
            .lineLimit(nil)
            .frame(height: geometry.size.height + 5)
    }
}

But it doesn't work and moreover it gives me unexpected behaviours (like ignoring the .lineLimit(nil) for example)

   

I believe that you need to put an offset after font size.

Text(text)
    .font(.custom("Lato-Regular", size: 17))
    .offset(y: 20)
    .foregroundColor(buttonTextColor)
    .fixedSize(horizontal: false, vertical: true)
    .lineLimit(nil)

For a more general view I have replaced some of your button specific details to make a generic view.

    var body: some View {

        ZStack {

            HStack {

                Text("Text")
                    .font(.custom("Lato-Bold", size: 40))
                    .foregroundColor(.red)

                Text("Words")
                    .font(.custom("Lato-Regular", size: 40))
                    .offset(y: 20)
                    .foregroundColor(.blue)
                    .fixedSize(horizontal: false, vertical: true)
                    .lineLimit(nil)

                Spacer()

            }
            .padding(10)

        }
        .frame(minHeight: 40)
    }

   

Also with the offset it doesn't work. The offset moves the Text view but the subscript character remains cut. I think that the solution could be getting the initial height of the Text view by a GeometryReader and sum about 3 points but I don't know how to do it

   

OK, I think your padding is in the wrong place, as you are padding out the ZStack, rather than the HStack. You could try

HStack {

    Text(optionLetter)
        .font(.custom("Lato-Bold", size: 17))
        .foregroundColor(buttonTextColor)
        .padding(.bottom, 50)   // choose a suitable amount, 50 is just for dramatic effect

    Text(text)
        .font(.custom("Lato-Regular", size: 17))
        .foregroundColor(buttonTextColor)
        .fixedSize(horizontal: false, vertical: true)
        .lineLimit(nil)

        Spacer()
}
// padding move from here

   

I just tried but this not solved It's not about spacing, also because if I put long text inside the button all works fine

   

How are you creating the Text? Can you give us the code to this and then people can try it as we can only see Text(text) as it maybe the way the subscript is made!

   

@NigelGee I am getting the subscript char from Firebase Realtime Database, assigning it to a var and passing it to the Text. If I add a "\n" in this way Text("\(text)\n") I can see the subscript char but with an unwanted new line.

   

Hacking with Swift is sponsored by Stream

SPONSORED Check out Stream's cross-platform open source chat SDK on GitHub! Write once and deploy your app with fully featured chat UI on iOS and macOS.

Go to GitHub

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.