Long RTL Text gets cut-off/overflown on right in SwiftUI

Question

I have a bit long RTL (Hebrew) texts that I want to display in full (on multiple lines, without wrapping), and it keep gets overflown/cut-off on right, no matter how I tried to fix it.

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:

Item View - text being cut

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

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

Does anyone has a clue how can I fix this issue? This is actually my first question in StackOverflow, this is how desperate I am :)

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(reporter)
                .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

Would you add some example Hebrew strings for testing? Did you want them to be wrapped or what? — Asperi, Apr 16 '20 at 11:43
I added an example, thanks. I don't want them to be wrapped (I want to display them in full) — dabombs, Apr 16 '20 at 14:18

score 0 · Answer 1 · answered Apr 16 '20 at 13:28

I've created a simple test to display Hebrew text that I think doesn't look chopped off: text copy and pasted from somewhere on the net.

struct ContentView: View {
@State var items = [Itemx(1), Itemx(2)]
var body: some View {
    ScrollView {
        VStack(alignment: .leading, spacing: 10) {
            ForEach(self.items, id: \.id) { item in
                item
            }
        }
    }
}
}

struct Itemx: View, Identifiable {
var id = UUID().uuidString
var text = ""

init(_ tx: Int) {
    if tx == 1 {
        text = "פליה כלשהיא מטעמי גזע, צבע, מין, לשון, דח, דעה פוליטית או דעה בבעיות אחרות, בגלל מוצא לאומי או חברתי, קנין, לידה או מעמד אחר. גדולה מזו, לא יופלה אדם על פי מעמדה המדיני, על פי סמכותה או על פי מעמדה הבינלאומי של המדינה או הארץ שאליה הוא שייך, דין שהארץ היא עצמאית, ובין שהיא נתונה לנאמנות, בין שהיא נטולת שלטון עצמי ובין שריבונותה מוגבלת כל הגבלה אחרת"
    } else {
        text = """
        מבוקשים. ב עסקים אחרות לחשבון אחד, לערך הבאים אחר של, אם אחר אינו ספרות. לכאן משפטית את תנך, אחר אל רוסית נבחרים, שנורו גיאוגרפיה לרפובליקה אם סדר. פיסיקה טכניים שימושיים כדי בה.

        כדור המלחמה ביולוגיה של זכר, לוח אספרנטו סוציולוגיה של. ויקי לאחרונה קרן מה. על רקטות פולנית בדף, החלה ארכיאולוגיה על בדף. שתפו פולנית או אחד. משחקים פילוסופיה אתה ב, ויש המזנון תקשורת של, גם אחר בחירות מיתולוגיה. בדף שנתי לציין בחירות דת, אל כלליים תיאטרון גיאוגרפיה כתב.

        על נוסחאות האנציקלופדיה העריכהגירסאות עוד, הרוח מדויקים המקושרים כלל על, בה תיבת בהבנה לעברית היא. חפש בהשחתה כלליים פסיכולוגיה או. כלשהו מדינות ב שער, חפש לערוך לחשבון של. אנא סרבול צרפתית גם, אחד של קודמות מועמדים. אם שתי מאמר ומדעים חרטומים, פיסול בדפים זכויות שכל ב. צ'ט למנוע עיצוב הבהרה מה, הבקשה איטליה מבוקשים או זכר. מה בקר כלכלה ספרדית.

        זאת רוסית ביולי את, אנגלית ותשובות ויקימדיה היא מה, אל זאת ספרדית חופשית. בקר ספרדית משחקים התפתחות דת. בה מרצועת קצרמרים קרימינולוגיה מתן, רקטות לתרום טכנולוגיה על מתן, שנתי רפואה על כתב. מתן ובמתן תקשורת המקושרים בה. המדינה ומהימנה דת שמו.

        גם מדע הטבע הבאים ברוכים. החברה למתחילים היא אם. העזרה לרפובליקה בה עזה, מיוחדים מאמרשיחהצפה תנך דת. הרוח מיזמים בלשנות או שער, מלא חשמל שדרות בקלות אם, כתב זקוק עסקים מאמרשיחהצפה אם.

        חפש על כיצד ובמתן. מדינות למאמרים מדע דת, על כתב שונה פילוסופיה אתנולוגיה, על תרבות בארגז למתחילים לוח. שיתופית מבוקשים כלל אם, ניהול ספינות ויש בה, גם עזה כניסה ריקוד היסטוריה. פיסיקה לויקיפדיה ביוטכנולוגיה ויש בה, מתמטיקה תאולוגיה מלא או. שפות משפטית את אתה, הקנאים ויקיפדיה מדע ב. שמות דרכה שנורו בה שער, ויש חשמל טכנולוגיה על.

        שנורו לתרום היא על, בשפה קישורים מה כדי. גם ויש בארגז סוציולוגיה. ליום מונחונים על אחד. מיזמים כלליים רשימות צ'ט גם, מדע קבלו אחרים אם. לחבר ניהול קלאסיים אנא גם, או ומהימנה תאולוגיה שמו, ויש דת משפטים קולנוע.

        מדע ב בכפוף ברוכים. לוח בשפות סטטיסטיקה דת. הגרפים האנציקלופדיה על אחד, לוח אל הגרפים אינטרנט מיוחדים, של עזה רקטות וכמקובל. אל אחר תיבת רקטות, כיצד סטטיסטיקה בה כלל. העיר קולנוע איטליה דת לוח, כתב חינוך ברוכים נוסחאות אל. מדע החלה יוצרים ב.

        ארץ ראשי שדרות אינטרנט דת, מתן מיותר נוסחאות מה. אל עזה ספרדית צרפתית זכויות, רבה לעברית ומהימנה גם. החלל עזרה אירועים של שמו, צ'ט או תקשורת רשימות. מוגש מדעי סדר של. דת יוני פיסול שתי, של עוד בשפה שימושי מתמטיקה. בה מיזמים הנאמנים כלל, קרן את המדינה ומהימנה, ויש על נפלו ביולוגיה. שער שונה ביולי תחבורה את.

        אחרים בשפות העריכהגירסאות ב מדע. חפש בה פיסול רוסית מדינות. צ'ט קהילה פילוסופיה על, רקטות אודות שתי את, או לעריכה בלשנות מאמרשיחהצפה מתן. כדי המלחמה עקרונות אל, אנא אודות המזנון קצרמרים או.
        """
    }
}

var body: some View {
    VStack(alignment: .leading) {
        Text(text)
            .font(.body)
            .fixedSize(horizontal: false, vertical: true)
    }.padding()
}
}

Not all texts are being chopped. Some texts render as they should, some texts render badly. It varies on the number of characters. For example, the following text is being chopped on iPhone 11 Pro Max: פגשדשעצשדלעצשדלעצשדלעצשלדצע שדצגךגתךת שדכצשדלכצדלעצשדלעצדשלעצשדלעשדלעצשדלעצשכידי געדגדגיג גיחלג דגחידחד דגיכחדגחדגח דחדכחדגחדגחחחחחחחחחחדלעצשדלעצשדלעצדשצעשדעגצ לגצעלדשצעכשלדעצלשד שדלעצשדלע שלדצעלשדעדלשעצשליפי — dabombs, Apr 16 '20 at 14:12

score 0 · Answer 2 · answered Apr 17 '20 at 02:02

given the "bad" text example, the following combination for Item, seems to work on ios 13.4.1 in iPhone 11 Pro Max (simulator), iPhone 10 (real device) and macos catalyst. But then again I cannot read Hebrew to know for sure.

struct Item: View, Identifiable {

var id = UUID().uuidString
var text = ""

// testing with simple " and tripple """
init(_ tx: Int) {
    if tx == 1 {
        text = "פגשדשעצשדלעצשדלעצשדלעצשלדצע שדצגךגתךת שדכצשדלכצדלעצשדלעצדשלעצשדלעשדלעצשדלעצשכידי געדגדגיג גיחלג דגחידחד דגיכחדגחדגח דחדכחדגחדגחחחחחחחחחחדלעצשדלעצשדלעצדשצעשדעגצ לגצעלדשצעכשלדעצלשד שדלעצשדלע שלדצעלשדעדלשעצשליפי"
    } else {
        text = """
        פגשדשעצשדלעצשדלעצשדלעצשלדצע שדצגךגתךת שדכצשדלכצדלעצשדלעצדשלעצשדלעשדלעצשדלעצשכידי געדגדגיג גיחלג דגחידחד דגיכחדגחדגח דחדכחדגחדגחחחחחחחחחחדלעצשדלעצשדלעצדשצעשדעגצ לגצעלדשצעכשלדעצלשד שדלעצשדלע שלדצעלשדעדלשעצשליפי
        """
    }
}

var body: some View {
    VStack(alignment: .trailing) {
        Text(text)
            .font(.body)
            .fixedSize(horizontal: false, vertical: true)
    }.padding(.leading, 10)
}
}

This indeed fixes this specific "bad" text, but the padding needed to fix it is not constant across all texts, hence not a concise solution — dabombs, Apr 17 '20 at 08:12

Long RTL Text gets cut-off/overflown on right in SwiftUI

2 Answers2