Text cutting subscript character

Question

Created Mar ’21

Replies 6

Boosts 0

Views 1.6k

Participants 2

If I add a subscript character to my Text view, SwiftUI is cutting it like if it's not calculating its size.

The solution is to dynamically add about 3 height points to the view size (maybe with a GeometryReader) but I don't know how to achieve it.

Answered by OOPer in 664885022

Thanks for showing the issue-reproducible code.
I do not have a font named Lato-bold nor a Color primaryColor, but could have confirmed that what you have described did happen with some specific fonts.

Can't you use baselineOffset modifier?

Code Block             Text("\(quiz.question)")
                .font(.custom("Lato-Bold", size: 17))
                .baselineOffset(5) //<-
                .foregroundColor(Color.red/*("primaryColor")*/)
                .multilineTextAlignment(.center)
                .fixedSize(horizontal: false, vertical: true)
                .lineLimit(nil)
                .padding(.horizontal)

Boost

Answer 1

OOPer OP

Mar ’21

If I add a subscript character to my Text view, SwiftUI is cutting it like if it's not calculating its size.

How are you showing the subscript character?
When I tried with some subscript characters like Text("xᵢ"), the content is presented properly.

0

Answer 2

gabfeudo OP

Mar ’21

I am downloading the string I manually added into Firebase Realtime Database. I put the subscript string by control+command+spacebar and selecting it from the list.
If I add a new line ("\n") in text it is showing normally, not cut subscript char (but with unwanted new line)

0

Answer 3

OOPer OP

Mar ’21

Can you show some example of whole text string? With control+command+spacebar, you can input any Unicode character so it does not give any meaningful info.

0

Answer 4

gabfeudo OP

Mar ’21

For example this is a string which gives me problem: "ICl e CH₂Cl₂"

Code Block ZStack {
        RoundedRectangle(cornerRadius: 10)
          .fill(Color.white)
          .shadow(color: Color( colorLiteral(red: 0, green: 0, blue: 0, alpha: 0.05)), radius: 7, x: 0.0, y: 0.0)
         
        Text("\(quiz.question)\n")
          .font(.custom("Lato-Bold", size: 17))
          .foregroundColor(Color("primaryColor"))
          .multilineTextAlignment(.center)
          .fixedSize(horizontal: false, vertical: true)
          .lineLimit(nil)
          .padding(.horizontal)
      }

I had to add "\n" at the end to show it correctly

0

Answer 5

OOPer OP

Mar ’21

Accepted Answer

Thanks for showing the issue-reproducible code.
I do not have a font named Lato-bold nor a Color primaryColor, but could have confirmed that what you have described did happen with some specific fonts.

Can't you use baselineOffset modifier?

Code Block             Text("\(quiz.question)")
                .font(.custom("Lato-Bold", size: 17))
                .baselineOffset(5) //<-
                .foregroundColor(Color.red/*("primaryColor")*/)
                .multilineTextAlignment(.center)
                .fixedSize(horizontal: false, vertical: true)
                .lineLimit(nil)
                .padding(.horizontal)

0

Answer 6

gabfeudo OP

Mar ’21

Thanks! I was not aware of this modifier. It worked perfectly

0