Page MenuHomePhabricator

Longer math formulas cutting off in preview
Closed, DeclinedPublic

Assigned To
None
Authored By
ovasileva
Mar 2 2018, 2:00 PM
Referenced Files
F18849034: Screen Shot 2018-06-06 at 4.43.02 PM.png
Jun 6 2018, 8:53 PM
F18849030: Screen Shot 2018-06-06 at 4.42.21 PM.png
Jun 6 2018, 8:53 PM
F18849028: Screen Shot 2018-06-06 at 4.39.49 PM.png
Jun 6 2018, 8:53 PM
F18849024: Screen Shot 2018-06-06 at 4.47.39 PM.png
Jun 6 2018, 8:48 PM
F18062222: Screen Shot 2018-05-07 at 2.48.09 PM.png
May 7 2018, 9:54 PM
F17294296: Screen Shot 2018-04-24 at 8.00.40 PM.png
Apr 25 2018, 12:02 AM
F17294316: Screen Shot 2018-04-24 at 8.01.09 PM.png
Apr 25 2018, 12:02 AM
F17294084: Screen Shot 2018-04-24 at 7.07.20 PM.png
Apr 24 2018, 11:09 PM
Tokens
"Love" token, awarded by Niedzielski.

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

Screen Shot 2018-03-02 at 2.58.09 PM.png (226×391 px, 60 KB)

Note the comma here containing its own line.
Screen Shot 2018-06-06 at 4.47.39 PM.png (472×357 px, 98 KB)

Event Timeline

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

Screenshot from 2018-03-05 18-01-47.png (425×633 px, 103 KB)

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

Screen Shot 2018-04-17 at 4.06.53 PM.png (535×501 px, 116 KB)

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

Screen Shot 2018-04-24 at 8.00.40 PM.png (1×814 px, 212 KB)

Screen Shot 2018-04-24 at 8.01.09 PM.png (506×806 px, 163 KB)

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.

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:

Screen Shot 2018-05-07 at 2.48.09 PM.png (230×452 px, 37 KB)

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?

@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
Screen Shot 2018-06-06 at 4.42.21 PM.png (244×346 px, 43 KB)
Screen Shot 2018-06-06 at 4.39.49 PM.png (461×382 px, 79 KB)

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

Screen Shot 2018-06-06 at 4.43.02 PM.png (369×356 px, 44 KB)

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 ?

Sounds good. Added to known problems list and closing.