Page MenuHomePhabricator

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

Description

Story
As a user, I do not want hovercards to end abruptly, as it is confusing
Background
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.

Details

Reference
bz65845

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).
Prtksxna created this task.May 28 2014, 5:54 AM
Jaredzimmerman-WMF triaged this task as Normal priority.Dec 3 2014, 12:30 AM
Jaredzimmerman-WMF set Security to None.
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
Quiddity moved this task from Backlog to Next Up on the Page-Previews board.Dec 12 2014, 2:48 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.

@JKatzWMF @Jdlrobson, mind taking a look at this?

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJan 8 2016, 5:18 AM

@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.

dr0ptp4kt reopened this task as Open.Aug 5 2016, 3:19 PM
dr0ptp4kt updated the task description. (Show Details)
dr0ptp4kt moved this task from Incoming to Needs Prioritization on the Readers-Web-Backlog board.
dr0ptp4kt added subscribers: Jhernandez, Zppix.
dr0ptp4kt added a subscriber: dr0ptp4kt.

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?


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.

Is this the same as T132522: Do not cut preview off mid sentence without ellipses ? We had discussed this task during grooming, but I re-discovered T132522: Do not cut preview off mid sentence without ellipses when looking at the previously identified critical blockers.

dr0ptp4kt removed dr0ptp4kt as the assignee of this task.Sep 2 2016, 4:12 PM
ovasileva raised the priority of this task from Normal to High.Sep 13 2016, 12:52 PM
ovasileva updated the task description. (Show Details)Sep 13 2016, 1:08 PM
Jdlrobson updated the task description. (Show Details)Sep 22 2016, 8:46 PM
ovasileva updated the task description. (Show Details)Sep 28 2016, 12:46 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.