Page MenuHomePhabricator

Math formulas can be unreadable in references in mobile view
Open, MediumPublic

Assigned To
None
Authored By
Cenarium
Mar 7 2016, 5:48 AM
Referenced Files
F9102649: image.png
Aug 17 2017, 11:24 PM
F8722709: iPhone 7 Copy.png
Jul 12 2017, 8:29 PM
F8708253: 2017-07-12.png
Jul 12 2017, 1:21 AM
F8708011: Simulator Screen Shot Jul 11, 2017, 5.05.52 PM.png
Jul 12 2017, 12:18 AM
F8708015: iPhone 7 Copy.png
Jul 12 2017, 12:18 AM
F8708016: iPhone 7.png
Jul 12 2017, 12:18 AM
F3552717: pasted_file
Mar 7 2016, 7:09 PM
F3552700: pasted_file
Mar 7 2016, 7:09 PM

Description

When references containing math formulas are shown with JavaScript, the formulas can be unreadable. This the case in safari and in chrome.
Example: https://en.m.wikipedia.org/wiki/Reflexive_space#Reflexive_locally_convex_spaces (click [17] - there is a hidden math icon at the end of the reference)

Screen Shot 2016-03-07 at 9.56.49 AM.png (459×415 px, 46 KB)

Preferred Solution

Per @alexhollender_WMF in T129054#8363253 we would like to convert the reference drawer to use the gray background. This would require updates to the Drawer component.

iPhone 7 Copy.png (1×750 px, 181 KB)


Event Timeline

bd808 triaged this task as Low priority.Mar 7 2016, 5:57 PM
.references img.mwe-math-fallback-image-inline.tex {
  background-color:#fff;
  padding:2px;
}

result:

pasted_file (148×484 px, 29 KB)

and for modern browsers we can use this

.references img.mwe-math-fallback-image-inline.tex {
   -webkit-filter: invert(1);
}

result:

pasted_file (153×489 px, 29 KB)

actually, i thought about it and we should use white drawers instead of black. there is no reason for using dark themed drawers

I propose we use the same drawer pattern as of warning messages like this >

Simulator Screen Shot Jul 11, 2017, 5.05.52 PM.png (1×750 px, 138 KB)

We can borrow the dismiss mechanism + browser support + fallback

Here's how the citations will look with the above drawer pattern

iPhone 7 Copy.png (1×750 px, 181 KB)

iPhone 7.png (1×750 px, 220 KB)

Only one drawback of this
We won't have a title that says "citation"
right now we have a very grey uppercase random icon and title which doesn't work. I don't think it's adding much value.
being said that, we do have drawer use cases where we _do_ need a title, in that case we should redo the title part of our drawer pattern.

for this task, let's just re-use it.

@Cenarium what do you think?

Just a side note: Works fine if MathML is enabled.

2017-07-12.png (1×960 px, 145 KB)

awaiting more feedback on 3 possible solutions in the description. we can decide which solution to pick based on effort and value.

moving it to needs analysis till then

@Nirzar :

CSS filters are not supported in IE <= 12 according to http://caniuse.com/css-filters/embed
Given the number of IE based mobile browsers, it might be acceptable to minimise this bug to all older browsers. We currently do support IE9 but in future that will change.

Solution 1 is the easiest and has the most widest support.

Solution 3 is really up to you and a choice of design (this is previously how they looked). Reusing drawer pattern does however simplify our codebase at the expense of some additional work now.

Your choice! All 3 would work but solution 1 has the least cons.

I was surprised to find mobile references drawer on black background. Not sure, what the reason behind it was, though have a strong preference towards solution #3.
Not only does it seem not as disconnected from rest of UI as the black ones, it also has quite some maintenance advantages over the others.
References drawer external links didn't show external link icon (usefulness of this is another topic), my guess isn't only for design, but also because it's icon wasn't supported on black background.

image.png (308×1 px, 47 KB)

Moreover as @Nirzar already pointed out, there's more work to ensure contrast accessibility support of elements like title and icon.
As long as filter isn't fully supported cross-browser and support/maintenance costs are high for making this little element work, my preferred outcome would be #3.

@Volker_E just for reference, the reason was to distinguish between normal page previews drawers on mobile (which we never shipped) and the reference drawer. so as to reduce confusion. but i don't think are have that problem anymore and it can solved with strong iconography if needed

This is effectively the same as T111222.

Once again, inlining equation SVGs would help here, too (since they would become white on black just as the text).

@alexhollender I am considering this for a task relating to a future technical goal. Out of the 3 options for fixing do you have a preference on which we use? If this requires more thought no worries, I can punt this to a future technical goal, but it would be nice to fix.

CSS filters are quite widely supported now if we wanted to do the fix suggested in https://phabricator.wikimedia.org/T129054#2095664 now.

(Related issue in app T295624)

@alexhollender I am considering this for a task relating to a future technical goal. Out of the 3 options for fixing do you have a preference on which we use? If this requires more thought no worries, I can punt this to a future technical goal, but it would be nice to fix.

Can you clarify which 3 options you are referring to? Any options that allows the formulas to display is fine with me.

@alexhollender I am considering this for a task relating to a future technical goal. Out of the 3 options for fixing do you have a preference on which we use? If this requires more thought no worries, I can punt this to a future technical goal, but it would be nice to fix.

Can you clarify which 3 options you are referring to? Any options that allows the formulas to display is fine with me.

There are 3 solutions in the task description. Note, that question was from over a year ago, so I am not considering this for a technical goal right now.

@Jdlrobson it seems like all 3 options use the drawer, and the differences are whether the drawer is white or black, and whether the math formula has a white background? I'm not sure what the rules are on when the drawer is black vs when it is white, but the white one is much easier to read, so we should use that if possible:

iPhone 7 Copy.png (1×750 px, 181 KB)

if we can't use that this is fine:

pasted_file (153×489 px, 29 KB)