Page MenuHomePhabricator

Longer math formulas cutting off in preview
Closed, DeclinedPublic

Description

Steps to reproduce

  1. Go to https://cs.wikipedia.org/wiki/Geometrie
  2. Hover over polynomů

OR

  1. Go to https://en.wikipedia.org/wiki/Dual_space
  2. Hover over Linear equations

Expected
Formula displays correctly
Observed
Formula gets cut off abruptly


Note the comma here containing its own line.

Event Timeline

ovasileva created this task.Mar 2 2018, 2:00 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMar 2 2018, 2:00 PM
ovasileva triaged this task as Normal priority.Mar 2 2018, 2:00 PM
Dvorapa added a subscriber: Dvorapa.Mar 2 2018, 3:51 PM
pmiazga added subscribers: Nirzar, pmiazga.EditedMar 5 2018, 5:04 PM

@Nirzar whats do we want to do in this specific scenario? The only viable option is to resize the popup to fit whole formula.
Current height of the not-tall popup is 320px, to fit this formula we need 415px - but I'm sure there are some longer ones.
There is also an open question - what to do when there is an image.

An example of resized popup:

Jdlrobson assigned this task to Nirzar.Mar 6 2018, 5:20 PM

another example:
go to https://en.wikipedia.org/wiki/Linear_algebra and hover over "systems of linear equations"

alexhollender added a comment.EditedApr 24 2018, 11:09 PM

@ovasileva messed around a bit with this. Hard to tell how often this will do the trick (need more examples to test on) but here I'm adding a gradient to the bottom of the math formulas:

.mwe-math-element:after { 
    background-image: linear-gradient(-180deg,rgba(255,255,255,0.00) 0%,#FFFFFF 100%);
    content: ' ';
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 25px;
}

Here's what it looks like in the two examples mentioned above:


Looks good to me. Thanks @alexhollender! Moving this to upcoming so we can discuss with the team.
Note to self: test whether this is happening with chemical formulas as well.

alexhollender removed Nirzar as the assignee of this task.May 7 2018, 5:19 PM

Note the proposed CSS will not work if the equation is inline (I've not been able to find an example but consider what happens if V->W in this example is a math element:

Can we do some QA on this before committing to it?

To be clear, we will still clip the equation horizontally, even if this loses important context? Can this be added to description if so?

alexhollender updated the task description. (Show Details)Jun 6 2018, 8:47 PM
alexhollender updated the task description. (Show Details)

@Jdlrobson are you referring to this scenario, where the inline math element higher (or lower up) in the text preview causes the extra gradient to be added to the bottom?

getometric algebraaffine variey

To be clear, we will still clip the equation horizontally, even if this loses important context? Can this be added to description if so?

deferring to @ovasileva

Can we do some QA on this before committing to it?

@Jdlrobson do you mean QA with the css (T188734#4155870) enabled? I've only been able to find one other link to test on

I chatted to @alexhollender about this today and we don't think there's much we can do here. No easy fix. @ovasileva would you be okay closing this as "declined" and mark this as a known problem on https://www.mediawiki.org/wiki/Extension:Popups#Known%20problems ?

ovasileva closed this task as Declined.Jun 14 2018, 6:08 PM

Sounds good. Added to known problems list and closing.