Long words in title problematic in content cards

[rtibbles]

Observed behavior

@christianmemije reports:
Long card title get cut off inside cards, fonts popping in making text shift

Expected behavior

Titles always get displayed in a length sensitive way.
Fonts should not pop in and make text move!

User-facing consequences

Can't read titles.
Jerky visual experience.

Steps to reproduce

Look at a content card with a long title.

Context

• v0.11.0-beta1

[indirectlylit]

I'm not reproducing in either Learner or Coach

[christianmemije]

This happens for card with long words. We would need to add word-break: break-word;

[christianmemije]

Overflowing text fixed in #4439

[indirectlylit]

As indicated here, the previous solution caused real words to break at arbitrary points.

One strategy might be to have the TruncatedText component gracefully handle overflow, e.g. like:

@rtibbles do you see the font movement again after #5479 was merged?

[rtibbles]

If anyone else has time to confirm this is still fixed, I would appreciate it.

[radinamatic]

On 0.12.y dev branch I see ... substituting the whole long title of the content card, on both FF & Chrome on Ubuntu 18.04. Not liking the tooltip strategy, it forces the user to hover to figure out what is inside.

Words in long titles are still truncated arbitrarily in FF:

[indirectlylit]

I see ... substituting the whole long title of the content card, on both FF & Chrome on Ubuntu 18.04. Not liking the tooltip strategy, it forces the user to hover to figure out what is inside.

Yes, this is the expected behavior at present. In #4439 we tried to address it by breaking at arbitrary points in words, but that led to #5468 which was much more common than this issue, which requires somewhat contrived examples to reproduce.

The main thing I want to make sure of for 0.12.4 is that we don't have this behavior:

Fonts should not pop in and make text move!

and it sounds like we don't.

Adding the 'needs design' label to hash out possible solutions, e.g. the one described above (cc @khangmach)

[indirectlylit]

Aaactually I'm confused because in your screenshot, it's still breaking across words! This seems to indicate that #5468 was not fixed.

[khangmach]

Fonts should not pop in and make text move!

I'm not understanding what this means. Do you mean fonts being loaded which change the length of the title?

Not liking the tooltip strategy, it forces the user to hover to figure out what is inside.

Without re-designing the entire content card component, having a tooltip sounds like the only reasonable behavior. This comment kind of implies that the user cannot discern what a certain word is without the entire word/string showing. For example, if the word "subtraction" is cut off to "subtrac...", you can reasonably predict what the word is going to be and mentally form the title. For incredibly long nonsense strings/non-western translated words we do need the tooltip shortcut.

My thoughts:

• No white gradient. This is a weird design choice that I don't see great benefits over an ellipses (...)
• White gradient is incredibly hard to see. And we would still need a tooltip for it, unless we worsen the user experience via introducing horizontal scrolling. We'd also have to do this everywhere else in Kolibri, which is detrimental
• Have Kolibri detect whether a word will cause overflow. If the word causes overflow, move it to a new line
• If on the new line, the word causes overflow, add an ellipsis (...) to cut off the word at the max width of the text area.

Instead of eliminating tooltips and reinventing the wheel here, we should be encouraging better naming practice and be able to have a consistent shortcut behavior in the Kolibri app to help users discern incredibly long words.

[indirectlylit]

There are two scenarios:

1. There are so many words that the title would take more than 3 lines. In this case, we show the ellipsis and things work fine. There is no proposal to change that.
2. There is a single long word which is longer than the width of the card. That's the scenario this issue is dealing with. I've updated the issue title to reflect that.

Unfortunately I don't know of any straightforward way of adding an ellipsis for this scenario. The gradient was the only thing I could think of but it would be helpful to get some design input

[indirectlylit]

closing in favor of #5468