Description
Description
I'd like to follow up on an issue originally reported by the user zhenikk here: react-native-community/discussions-and-proposals#780
He was advised to report the bug on this repo, but never did, as far as I can tell. This is what zhenikk wrote originally:
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?
Steps to reproduce
- Create a string with a soft-hypen (
\u00AD) in it, e.g. "hinzu\u00ADfügen". - Display it with a large enough font size so it gets hyphenated and broken into multiple lines
- On iOS, depending on the font and screen size, the text might be broken at unexpected positions, e.g.
"hinzufü-
gen"
React Native Version
0.74.2
Affected Platforms
Runtime - iOS
Output of npx @react-native-community/cli info
-
Stacktrace or Logs
-
Reproducer
https://snack.expo.dev/@arpad.botos/vigorous-red-macaroni-and-cheese
Screenshots and Videos
No response