Page MenuHomePhabricator

Inconsistent gradient on Wikipedia Preview
Closed, ResolvedPublic



We are using a gradient at the bottom of the preview to communicate to users that there is more content is available. The gradient is not consistent across different previews.


We have made some minor improvements to Wikipedia preview layout which improves the gradient visibility. Sharing a before and after screenshots for a visual reference.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 30 2020, 9:14 AM
SGautam_WMF updated the task description. (Show Details)Jul 30 2020, 9:14 AM
hueitan added a subscriber: hueitan.EditedJul 30 2020, 10:31 AM

it would be great to see if we can bring consistency to gradient as visually

We can't guarantee that because the gradient box is a fixed size.

In theory, it is possible to keep consistent by having the dynamic gradient size when considering font size, font style, line height, language, device-specific styling, and more. In practice, we can try to do mathematics here but don't think it's easy.

SBisson renamed this task from Inconsistent gradient on Wikipedia Preview. to Inconsistent gradient on Wikipedia Preview.Aug 17 2020, 1:58 PM

@SGautam_WMF it should be possible to position the gradient correctly based on line-height alone. Other products (Page Preview[1], Wikilookup[2]) seem to be doing it successfully.

The alternative, using ellipsis, is much harder since it's almost impossible to know how much text will fit in the container to truncate it to the correct length. Another option is to position ellipsis near the end of the text but it is more likely to look off than the gradient because they are expected to be positioned exactly after the last visible letter.

[1] It uses a gradient in the bottom right corner for about 20% of the length of the line. It looks OK in most cases but if the last line isn't very long we don't see it.

[2] It uses a gradient on the last 2 lines or so.

SBisson triaged this task as Medium priority.Sep 15 2020, 7:08 PM

@SBisson this sounds good. Maybe we can consider it after implementing the visual refinement one(T260408) as I have simplified the gradient to that which could be helpful while working on this ticket.

@SBisson in the visual refinement task(T260408) I have separated the gradient & CTA by creating a white overlay footer which only takes care of CTA "Continue reading" or "Read more on Wikipedia". I have also increased the height of the gradient a couple of pixels. I am not sure if this would have anything to do with the consistency of the gradient if not then irrelevant to visual refinement ticket we can start working on it. I am sharing the zeplin link here to compare the current and revised design from the specs point of you. If it makes sense then I will update the zeplin link to the task description as well.

Revised preview layout(T260408) -
Existing preview layout -

SGautam_WMF updated the task description. (Show Details)Sep 22 2020, 5:47 AM
SGautam_WMF moved this task from Design doing to Ready for Dev on the Inuka-Team (Kanban) board.
hueitan claimed this task.Sep 22 2020, 12:03 PM
hueitan moved this task from Ready for Dev to Dev on the Inuka-Team (Kanban) board.
hueitan added a comment.EditedSep 22 2020, 1:01 PM

I have checked on this, the reason is that there are font-family settings in the preview code (not all) T260407: Use device default font for Wikipedia preview

Once removing this, I can see the consistent gradient.

The max height for the preview (before expand is 360px) now, we need to adjust it a bit to show more text in gradient (2 lines in gradient).

hueitan added a comment.EditedSep 24 2020, 9:10 AM

This is what I got after having the new layout and update the gradient position (Windows, Chrome, Mobile Simulator)

Branch name: T259239-gradient

NOTE: This is the view from my side, different browser and device size might differ due to the default font style
hueitan moved this task from Dev to Code Review on the Inuka-Team (Kanban) board.Sep 24 2020, 9:23 AM

Current status :

Wait until design to confirm this T260407#6490024, then update the PR and do another round of testing.

SBisson moved this task from Code Review to QA on the Inuka-Team (Kanban) board.Oct 5 2020, 7:14 PM
Jpita moved this task from QA to Design sign off on the Inuka-Team (Kanban) board.Oct 7 2020, 1:14 PM
AMuigai closed this task as Resolved.Oct 12 2020, 11:00 AM