Long translations cropped/overlapping

[wanderingstan]

As is typical, German has über-long words which break some layout elements:

---

In listing card

Full word is "Verkauft".

---

Footer

[wanderingstan]

I confirmed that adding a "soft hyphen" allows the word to get hyphenated here, and added to crowdin.

https://crowdin.com/translate/originprotocol/63/en-de#q=product+brief

<a href="https://www.originprotocol.com/de/product-brief" style="
    word-wrap: normal;
">Produkt&shy;beschreibung</a>

[jordajm]

FWIW - this is the kind of thing we could catch during development if we do this: https://github.com/OriginProtocol/origin-dapp/issues/397

[wanderingstan]

Just noticed in Japanese also:

[micahalcorn]

We certainly need to do a pass on the entire DApp, but I think that specifically in regard to that sold tag, Aure wants to scrap it in favor of something else.

[mek32390]

@wanderingstan to confirm, are you proposing that when we find an irregularly long word that breaks the layout, the correct step to take is to add/approve a translation of that word within crowdin that includes a soft hyphen?

[wanderingstan]

Ugh, apparently not: The soft hyphen code isn't making it out of Crowdin:

@mek32390 - If we can figure out how to include soft hyphens, they are the "correct" approach to fixing cases where the long word can safely be wrapped to a 2nd line.

[wanderingstan]

EDIT: Turns out we just need to encode the characters in the JSON way. A soft hyphen is thus represented as \u00AD, and the translation of Product Brief in German is Produkt\u00ADbeschreibung

@jordajm Do you know if html codes are being stripped by react-intl, and/or if there is some way to stop that? It looks like the html code ­ is getting exported from crowdin and picked up by our json here: https://github.com/OriginProtocol/origin-dapp/blob/a9348de77f62c9192a150c0531bf350e2305f825/translations/languages/de-DE/all-messages.json#L28

So the problem must be that it gets escaped to t­ before rendering.