react-native-community/discussions-and-proposals

Add support of hyphenationFactor and languageIdentifier properties for <Text> in iOs 15+

zhenikk opened this issue · 1 comments

Introduction

Soft hyphen is not working properly in iOS 15 (This issue appears even in native applications.)

Details

I develop application in German language that has a lot of long words. For us is critical to use hyphenation since fonts are large, and there are a lot of situations that word can't fit 1 line.

There is similar thread in Apple forum. https://developer.apple.com/forums/thread/691006
Before iOS 15, Apple strictly followed soft hyphen. In iOS 15+ Apple now only consider those as hyphenation opportunities.

in iOs native there are paragraphStyle hyphenationFactor and textAttribute languageIdentifier that can help to fix this issue, but React Native doesn't support it out of the box.

Here is example of solution in iOs native app

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    

    override func viewDidLoad() {
        super.viewDidLoad()
        
        
        let paragraphStyle = NSMutableParagraphStyle()
        paragraphStyle.hyphenationFactor = 1.0
        let hyphenAttribute = [
            NSAttributedString.Key.paragraphStyle : paragraphStyle,
            NSAttributedString.Key.languageIdentifier: "de",
            NSAttributedString.Key.font: UIFont.systemFont(ofSize: 31)
        ] as [NSAttributedString.Key : Any]

        let attributedString = NSMutableAttributedString(string: "Das war die Achtsamkeitsmeditation.", attributes: hyphenAttribute)
        self.label.attributedText = attributedString
    }
}

Basically with hyphenationFactor and languageIdentifier iOs does hyphenation automatically (text should be without soft hyphens)
and this text is grammatically correct.

Can we add support of this 2 properties in newer versions of React Native?

👋 there - as stated in the README and the issue template, this repo is for long-form discussions. This looks much more like a bug, so you should be posting this issue on the main react native repo.