Page MenuHomePhabricator

Hovercards: Fix the length of the extract, and add gradient
Closed, DuplicatePublic


As a user, I do not want hovercards to end abruptly, as it is confusing
From T132522:
Currently, there is either a character count or word count limiting hovercard text. In the case that the text ends mid-sentence, there should be an elipses to indicate there is more text.

"As a user, I get confused when sentences drop off without punctuation or explanation."

Acceptance Criteria
We should do what we do in the Cards extension and make use of a pseudo element to handle this blurring.

Screenshot 2016-04-10 17.06.42.png (286×520 px, 125 KB)

Screenshot 2016-04-10 17.04.21.png (391×302 px, 180 KB)



Event Timeline

bzimport raised the priority of this task from to Needs Triage.Nov 22 2014, 3:11 AM
bzimport added a project: Page-Previews.
bzimport set Reference to bz65845.
bzimport added a subscriber: Unknown Object (MLST).
Quiddity renamed this task from Hovercards: Fix the length of the extract to Hovercards: Fix the length of the extract, and add ellipses.Dec 12 2014, 2:39 AM

Are we agreeing to follow the prototype that I had made for this last year? Here are the demos once more:

It fills up the div word by word and it thus not very performant. @werdna and @AndyRussG could you please take a look at the code and tell me if its alright to migrate it to the extension.

@Prtksxna can you confirm the user requirements that are guiding this? In T132522 I highlight that any sentence cut-off should result in an ellipse.

I am not sure how that is connected to the additional 2 requirements in this ticket. Can you point out areas where the current solution does not lead to awkward-use of the space or certain scripts look awkward?

Right now Hovercards does not have a character limit, it only has a geometric limit through CSS and it hides the extra text (lets it overflow, and doesn't display it). We do this because setting a character limit is hard when you are supporting multiple scripts. For example, in Devanagari 'चुंबक' is five characters, but 'चबक' is three, which makes it hard to set script specific character limits too.

This makes it non-trivial to add ellipses at the end of the sentence. I am not sure if I answered your question , but I hope the explanation helps .

@Prtksxna thanks for that extra info! I wasn't aware of the different script properties. Why aren't words cut-off mid word then? If we can identify a space, surely we can place ellipses at the end of that space?

Words aren't cut off mid sentence because we don't let the word wrap break the words. We don't exactly identify the space character, we just tell the browser that we have a certain amount of space and that it should fill it up, and then we cut vertically from that space and display it.

To see this in action, you can increase the height of .mwe-popups.mwe-popups-is-tall .mwe-popups-extract to lets say 155px. You'll be able to see the top half of the next sentence.

Screen Shot 2016-04-15 at 12.36.28 am.png (322×473 px, 146 KB)

Is this task simply to add ellipsis? Please can someone clarify what needs analysis here. Are we expecting Nirzar to magically solve this or is there a technical problem we'd like to work out?

Screen Shot 2016-08-11 at 1.47.41 PM.png (310×508 px, 169 KB)

Screen Shot 2016-08-11 at 1.47.30 PM.png (284×479 px, 133 KB)

I believe @Nirzar would need to provide a mock, then it would be a matter of technical implementation. I believe multiline text block ellipsis is available in some browsers and will eventually be more generally available. It seems like that would require less work than building a clamping technique.

@dr0ptp4kt, @Nirzar - double-checking that this should still be open?

Can we use :after with … (U+2026)

or we used a horizontal gradient in related pages. that technique is super nice in such cases.

ovasileva raised the priority of this task from Medium to High.Sep 13 2016, 12:52 PM
ovasileva renamed this task from Hovercards: Fix the length of the extract, and add ellipses to Hovercards: Fix the length of the extract, and add gradient.Nov 24 2016, 6:41 PM
ovasileva closed this task as a duplicate of T150814: Improve Page Preview visual design.