Long RTL Text gets cut-off/overflown on right

Question

Created Apr ’20

Replies 2

Boosts 0

Views 1.3k

Participants 2

I have a bit long RTL (Hebrew) texts that I want to display in full (on multiple lines, without wrapping), and some of them keep getting overflown/cut-off on right, no matter how I tried to fix it. I guess it depends on the way SwiftUI renders those texts.

This is actually a problem in the Text component but it worth mentioning that I tried contain the items in both List and ScrollView, without success to fix the problem (while ScrollView yeilded a bit better results). This how it looks:

https://i.stack.imgur.com/35Pc9.png

Example for a "bad" text (on iPhone 11 Pro Max):

פגשדשעצשדלעצשדלעצשדלעצשלדצע שדצגךגתךת שדכצשדלכצדלעצשדלעצדשלעצשדלעשדלעצשדלעצשכידי געדגדגיג גיחלג דגחידחד דגיכחדגחדגח דחדכחדגחדגחחחחחחחחחחדלעצשדלעצשדלעצדשצעשדעגצ לגצעלדשצעכשלדעצלשד שדלעצשדלע שלדצעלשדעדלשעצשליפי

Does anyone has a clue how can I fix this issue?

I've ported this question from StackOverflow as no one was able to help there:

https://stackoverflow.com/questions/61248990/long-rtl-text-gets-cut-off-overflown-on-right-in-swiftui

This is the ScrollView:

ScrollView {
    VStack(alignment: .leading, spacing: 10) {
        ForEach(self.items, id: \.id) { item in
            item
        }
    }
}

And this is an item:

var body: some View {
    VStack(alignment: .leading) {
        HStack {
            Text(caption)
                .font(.caption)
            Text(formatDate(date: date))
                .font(.caption)
                .foregroundColor(.gray)
        }
       
        Text(text)
            .font(.body)
            .fixedSize(horizontal: false, vertical: true)
    }
    .padding()
}

I'm using .environment(\.layoutDirection, .rightToLeft) on the ContentView:

let contentView = ContentView()
.environment(\.colorScheme, .dark)
.environment(\.layoutDirection, .rightToLeft)

Thanks,

Uri

Boost

Answer 1

arifinfrds OP

Feb ’23

I am having the same issue in Arabic. Any update on this?

0

Answer 2

arifinfrds OP

Feb ’23

Recently I am able to fix that by bridging into UILabel and modify the lineBreakingMode. Basically I tried to start from answer on this stack overflow, and modify to my needs.

struct Text2: View {

    let text: String

    let geometryProxy: GeometryProxy

    

    var body: some View {

        UILabelAdapter(text: text, geometryProxy: geometryProxy)

            .frame(maxWidth: .infinity, alignment: .leading)

            .padding([ .leading, .trailing ], 8)

    }

    

    struct UILabelAdapter: UIViewRepresentable {

        let text: String

        let geometryProxy: GeometryProxy

        

        func makeUIView(context: Context) -> UILabel {

            let label = UILabel()

            label.numberOfLines = 0

            label.lineBreakMode = .byWordWrapping

            label.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)

            label.font = .defaultArabicVerseFont(relativeTo: .largeTitle)

            label.preferredMaxLayoutWidth = geometryProxy.size.width

            return label

        }

        

        func updateUIView(_ uiView: UILabel, context: Context) {

            uiView.text = text

        }

    }

}

0