Create a TwitterDescription component about javascript

[hwinne]

@andizer With the current css styling, it is not possible to display 200 chars. For example, the Twitter preview as pasted above contains a description of approximately 157 characters, even though 200 is the max and the description obviously is not rendered completely.

Should the height be changed, or is 2 lines the maximum?

[hwinne]

@andizer We have another question. In the preview example, we can see that the description text spans two lines, and ends in ellipsis. However, the CSS docs explain that white-space: nowrap is required for use of text-overflow: ellipsis:

By definition, white-space: nowrap will never wrap text to the next line.

So the question is: how is it possible that the screenshot has text wrapped over two lines, and also has ellipsis (...)?

[johannadevos]

Note: Before we can look into @andizer's remarks regarding the CSS props when there is an image, the TwitterImage component needs to be created. @hwinne and I are working on that at the moment.

[johannadevos]

@afercia Your help would be very welcome :)

[afercia]

Correct: text-overflow: ellipsis works only with white-space: nowrap so it applies only to single lines. There's no way to do this in CSS other than using proprietary CSS properties, not supported in all browsers.

If you look at the markup of the example above you will notice the text is actually truncated after a certain amount of characters before it's sent to the browser: it's not done via CSS.

[johannadevos]

@afercia Thank you for the explanation!

It seems that the truncation issue is more complicated than foreseen. If we cannot do it in CSS, what is the best approach? We can manually implement truncation (see here for an example), but that tutorial isn't completely applicable to our situation since we do not want to truncate after a certain number of words. In our case, we want to fill the available space (two lines with a certain width) with characters, and then truncate.

[afercia]

There's no perfect solution, I guess.

It is possible to truncate after a certain amount of characters. I think @igorschoester implemented something like that for the TwitterTitle.

However, truncating at a fixed amount of characters (say 200) won't produce the same results in terms of space: for example: 200 i take less space than 200 m.

Re: CSS there's line-clamp but it's not standard and only works in webkit (Chrome, Safari, Opera). See https://css-tricks.com/almanac/properties/l/line-clamp/

In the same article, they mention Clamp.js haven't tested it, seems a bit old. Also, not sure using JS for this is appropriate, I wouldn't recommend it. Anyways, adopting new npm packages should be evaluated by @atimmer :)

[atimmer]

@johannadevos @afercia We have solved this in a different way for the snippet preview: https://github.com/Yoast/javascript/blob/develop/packages/search-metadata-previews/src/snippet-preview/SnippetPreview.js#L331-L357. We resize the title until it is small enough to fit on one line (two lines on mobile I think). When it was at first too large then we render ... behind it. This is a way to approximate what Google/Twitter do.

Let's use the same method for the TwitterPreview. Because this is now duplicated, please abstract this into a generally useable higher order component that lives in @yoast/helpers. You could also split this resizing logic from this issue and do it later, but I leave that to @IreneStr.

[IreneStr]

I discussed the description length a bit in the #product channel, because the Twitter docs are inconsistent, and not reflecting the reality in some regards. The conclusion is that we should go for:

• summary: 3 lines maximum. The width of each line is 357px.
• summary-large-image: 2 lines maximum. The width of each line is 476px.

I've created a new issue for the resizing, because it's also needed for the already merged TwitterTitle component: #157.