Add word-wrap support

[lipgartdmitriy]

react-pdf version: 2.0.13 word-wrap support needed when hyphenation is disabled. or may be there is a workaround how to add word wrapping when hyphenation is disabled?

[diegomura]

Can you elaborate a bit more on what you meant?

[lipgartdmitriy]

I have a table with several columns. number of columns and width is dynamic. So when the width of a column is less then the word width it overflows it's column and overlaps the next one. Adding soft hyphens after / doesn't work for me.

[ACPK]

@diegomura -

Here is an example of what is happening for us:

http://goog-
le.com

This causes the url not to work because of the dash. We would like to wrap the url as follows:

http://goog
le.com

[diegomura]

These examples do not refer to the same thing though, right? First would be works not wrapping in some occasions (not sure why soft hyphens do not work, maybe this helps? I recommend not flex layout on components havign text. Yoga is not that good)

The latter would be changing the hyphenation char. That's not currently possible if I remember correctly. Please open a new issue and I'll try to grab it

[ACPK]

@diegomura - The example from @lipgartdmitriy refers to one way we tried and the one with the dash refers to the other way. Hyphenating urls don't work as https://goo-gle.com gives a 404 page.

Small thing - The link in your last reply goes to a page that says You can use the default hyphenation callback as a starting point'. The words default hyphenation callback link to a 404 page.

[ACPK]

@diegomura Related to a closed ticket: https://github.com/diegomura/react-pdf/issues/248

[SatorCube]

I am also experiencing this problem

[angelomarques]

Any update on this issue?

[divmgl]

Maybe I'm not understanding the PDF spec, but if we have a way of determining what needs to be hyphenated, can't we provide an option for the hyphenation character? That way we can make it "", so the hyphen is not displayed at all.

[KayBeSee]

If you remove Line 41 from packages/textkit/src/engines/linebreaker/index.js it works as desired.

https://github.com/diegomura/react-pdf/blob/master/packages/textkit/src/engines/linebreaker/index.js#L41

Is there a way to allow users to insert their own separation glyph or leave it blank? cc @diegomura

[RichMatthews]

Any update here? I need the use case explained above. i.e.

http://goog-
le.com

should become

http://goog
le.com

Really this should be pretty easy to achieve?

[MasterRedStorm]

providing an option for the HYPHEN char would be really really cool :) i also have the problems that emails break with hyphens and then dont work anymore :(

[trongnd]

Just came across this issue and using this TextWrap component as workaround is working for me so far.

function noHyphen(text: string) {
  return ['', text, ''];
}

type TextWrapProps = TextProps & {
  children: string;
};

function TextWrap(props: TextWrapProps) {
  const { children, ...rest } = props;

  return (
    <Text {...rest} hyphenationCallback={noHyphen}>
      {props.children.split('').map((text, index) => (
        <Text key={index} hyphenationCallback={noHyphen}>
          {text}
        </Text>
      ))}
    </Text>
  );
}

// usage:

<TextWrap style={{flex: 1}}>12345678901234567890123456789012345678901234567890verylongtext</TextWrap>