3

I am trying to break lines of text with automatic hyphenation in Android with react-native. It is an important feature for some languages. For example for Russian and it's typography. In Russian words are longer than in English so they should be wrapped with hyphenation to create a straight right text border.

I tryied to follow suggestions in this question: Hyphenation in Android

I added soft hyphens in places where words can be splitted. But Android still wrap lines only at spaces. Then I replaced all the spaces with non-breaking spaces. And it works, until a word is not longer than 45 letters. As all my spaces are non-breakable Android treats all the text as a single word, so if it is more than 45 letters it is not hyphened.

Here is a screenshot with the problem. All the spaces are replaced with non-breaking spaces. First paragraph is longer than 45 letters so android break lines at any position (not at soft hyphens). Second paragraph is cropped to 45 letters and you can see the desired behavior there.

My setup:

npm dependencies:
  "expo": "21.0.0"
  "react-native": "0.48.4"
  "react": "16.0.0-alpha.12"

app.json
  "sdkVersion": "21.0.0"

Android-7.1.1, Expo-1.20 (Android application)
Gene Zharov
  • 33
  • 4
  • Have you tried mapping over the collection of words or paragraph, and if the word is longer than 45 chars then add a hyphen, else don't? – fungusanthrax Oct 06 '17 at 14:07

1 Answers1

1

Have you tried using a javascript hyphenation library such as bramstein/hypher? Seems like that should do the trick.

Chris Geirman
  • 9,474
  • 5
  • 37
  • 70
  • It is a tool to split a word on substrings so I can insert a soft hyphen between substrings. But the problem is that Android does not render that soft hyphen. And I cannot insert a hyphen by myself because text is not static and it has dynamic width. – Gene Zharov Oct 06 '17 at 10:12
  • Ok, sorry... was just an idea. Maybe there's another JS solution though. – Chris Geirman Oct 06 '17 at 10:40