Add hyphenation in Ionic app

Ionic Framework ionic-v3
1

I use an ion-grid in my Ionic 3 app. The data to show, I receive as JSON object from my database. Some words don’t fit in the columns and are, hence, cut off and continued in the next row. No hyphen ("-") is added and the separation is without any context to grammar. Like this:

enter image description here

This looks really ugly. I would like to somehow add hyphenation. However, I don’t get it running.

I tried the css-way (as follows), but this didn’t have any effect

<ion-grid lang="...">

ion-grid{
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

Does anybody have an idea of how to do this?

2

Try the word-break css

word-break: break-all
3

Thanks for the suggestion, @beck24. I tried word-break:break-word; before. This didn’t have any influence.

The word-break: break-all at least shows an effect: In a text, words are broken to new lines whenever the end of line is reached. However, no hyphen (“-”) is added and the separation is still done without any use of grammar.

4

Since the css solution didn’t work, I decided to use a javascript library, as suggested by torazaburo in the comments of a stackoverflow-question.

I ended up using the hypher-library by bramstein.

It works very well. My implementation in Ionic 3:

homePage.ts

// after imports declare hypher-variables
var Hypher = require('hypher');
var german = require('hyphenation.xx');
// xx stands for the language-pattern, e.g. "en-us". A full list can be found here: https://github.com/bramstein/hyphenation-patterns/tree/master/patterns

@Component({
  selector: 'home-page',
  templateUrl: 'home.html'
})

export class HomePage {
  h = new Hypher(language);  

  constructor(...) { }

  hyphenateWord(){
    let hypenatedWord = this.h.hyphenateText("ThisIsAVeryLongWord);
  }

}
1 Like
5

An ideal solution would be to create an ionic attribute like text-hyphen similar to text-wrap. But I have no idea how and if it is possible to create own custom attributes like that.

Does anyone know how to create such attributes?

6

Hi, Jay I’m having some troubles with hypher-library, what should I import and where, thanks in advice.

7

Hi @CristianFlores. You don’t need to import anything. You just install the hypher-library as explained in the link I posted above. Then you can use it as I showed in the same post.

8

Uhh… I still can’t make it work :confused: , could you share your .html & .ts, please?

9

You can see my.ts file above. Everything is in there.
In the .html file I just display the variable hypenatedWord.

What exactly doesn’t work as expected? Did you install everything as explained on the linked page?

10

Hi Jaykay,

How can I use your hyphenate code on html

tags?

I have many paragraphs to which I would like to combine it.