fix(lines-wordwrap): support wordbreak and hyphens option on lines method

[arnaud-zg]

Details on issue #2

[coveralls]

Coverage increased (+0.8%) to 84.307% when pulling 78ccfdd on arnaud-zg:fix/lines-support-long-word into 8740058 on bezoerb:master.

[coveralls]

Coverage increased (+0.8%) to 84.307% when pulling 3862a09 on arnaud-zg:fix/lines-support-long-word into 8740058 on bezoerb:master.

[bezoerb]

Thanks @arnaud-zg for working on this :)
I'll take a deeper look at the PR tomorrow.

[bezoerb]

The wordwrap option should be considered above before the breakpoint switch...case. You also should only check the last part and not the entire line. (Think about a line with 1000 characters and only the last 10char word is to long)

[arnaud-zg]

Right, I moved it just before the process loop over text parts and compute the lines, and add a breakpoint of type SHY for each new line. About the width of a line, we can't really know how much space it'll be on screen, so I think it's more interesting to measure it with measureText and compare it with max

[coveralls]

Coverage increased (+0.6%) to 84.133% when pulling 5dfa447 on arnaud-zg:fix/lines-support-long-word into 8740058 on bezoerb:master.

[coveralls]

Coverage increased (+0.6%) to 84.133% when pulling b3ef288 on arnaud-zg:fix/lines-support-long-word into 8740058 on bezoerb:master.

[coveralls]

Coverage increased (+0.6%) to 84.133% when pulling 53adbb8 on arnaud-zg:fix/lines-support-long-word into 8740058 on bezoerb:master.

[arnaud-zg]

It's been a while that my pull request is on pending status, actually I need this feature on my project. It would be great if it can be merged this week.

[bezoerb]

@arnaud-zg: sorry for taking so long to come back. This implementation may compute wrong values as the browser would not break the words like this (won't add - at the end)
I think it's important that the result reflects the behavior from the browser. Did you know that you can use the word-break: 'break-all' css rule (either in css or overwrite in your call)

 textMetrics(el).lines(text, {}, {'word-break': 'break-all'})
/*
[ 'Craspharetraph',
  'aretragravida.Vi',
  'vamusconsequ',
  'atlacusvelposu',
  'erecongue.Duis',
  'aloremvitaeexa',
  'uctorscelerisqu',
  'enoneuturpis.Ut',
  'imperdietmagn',
  'asitametjustobi',
  'bendumvehicul',
  'a.' ]
*/

Browser:

Sorry to not mention this before.
Does this help with your project or do you depend on text-metrics adding the ­ to each line?
You should also keep in mind, that adding the separator will result in grammatical errors

[arnaud-zg]

According to word-break and hyphens documentation, I updated my code and added those two option.
Case 1

textMetrics(el).lines(text, {}, {wordBreak: 'break-all'})
/*
[ 'Craspharetraph',
  'aretragravida.Vi',
  'vamusconsequ',
  'atlacusvelposu',
  'erecongue.Duis',
  'aloremvitaeexa',
  'uctorscelerisqu',
  'enoneuturpis.Ut',
  'imperdietmagn',
  'asitametjustobi',
  'bendumvehicul',
  'a.' ]
*/

Case 2

textMetrics(el).lines(text, {}, {hyphens: 'auto'})
/*
[ 'Craspharetraph-',
  'aretragravida.Vi-',
  'vamusconsequ-',
  'atlacusvelposu-',
  'erecongue.Duis-',
  'aloremvitaeexa-',
  'uctorscelerisqu-',
  'enoneuturpis.Ut-',
  'imperdietmagn-',
  'asitametjustobi-',
  'bendumvehicul-',
  'a.' ]
*/

[coveralls]

Coverage increased (+0.9%) to 84.42% when pulling 9f2116a on arnaud-zg:fix/lines-support-long-word into 8740058 on bezoerb:master.

[arnaud-zg]

Up

[bezoerb]

As i said, the break-all case is already handled here:
https://github.com/bezoerb/text-metrics/blob/master/src/index.js#L143
https://github.com/bezoerb/text-metrics/blob/master/src/utils.js#L426

[bezoerb]

Hyphens 'auto' behaves different. If you want to add a hyphen at the end of each line you can do

const value = textMetrics(el).lines(text.replace(/(.{1})/g,"$1­"))

[bezoerb]

Sorry @arnaud-zg, i don't think it's a good idea to add this feature as this won't match the expected behavior. When doing auto hyphens this should be done properly with grammatical correct results.

[arnaud-zg]

👍