SwiftUI Italic text clipping

user_4637398 0
Viewed 523

I noticed that a Text with .italic() clips letters: enter image description here

Setting frame size doesn't help: enter image description here

.paddings() doesn't help either. kerning(5) I don't want to use as it fixes the problem partially, at the right edge only, but it adds unwanted letter spacing.

struct ItalicTest: View {
var body: some View {
    Text("F")
        .font(Font.system(size: 60))
        .italic()
        .fontWeight(.black)
        .frame(width: 60, height: 60)
        .background(Color.red)
    }
}

I'd like to prevent clipping. Do you know a solution using pure SwiftUI?

swiftui ios
1 Answers

I know this is an old question, but I just had the same issue and found a propper solution.

You will have to add padding to your text and ask swiftui to collapse the padding and text before rendering it.

struct ItalicTest: View {
var body: some View {
    Text("F")
        .font(Font.system(size: 60))
        .italic()
        .fontWeight(.black)
        .padding(.horizontal) // <-- add padding
        .drawingGroup() // collapse the view and render together
    }
}
user_18382310
Related