Page MenuHomePhabricator

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

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)

Solution

Add

.references img.mwe-math-fallback-image-inline.tex {
  background-color:#fff;
  padding:2px;
}

result:

pasted_file (148×484 px, 29 KB)

OR 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)

3rd Possible solution
Reuse drawer pattern

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