Page MenuHomePhabricator

Display issues with math articles in dark & black mode
Closed, ResolvedPublic

Description

Via Android user feedback by email

In most math articles, there are boxes used in definitions or theorems that have a white background which does not change to black when switching to dark mode. This is an inconvenience.

Applies to both Android and iOS

Example article 1: https://en.wikipedia.org/wiki/Mass–energy_equivalence

AndroidiOS
Screenshot_20201119-215114.png (2×1 px, 544 KB)
IMG_06BA1691E93A-1.jpeg (2×1 px, 833 KB)

Example article 2: https://en.wikipedia.org/wiki/Glossary_of_graph_theory_terms

AndroidiOS
Screenshot_20201120-140130.png (2×1 px, 265 KB)
File 20.11.20, 14 01 12.jpeg (2×1 px, 284 KB)

Event Timeline

LGoto triaged this task as Low priority.Nov 23 2020, 6:47 PM
LGoto subscribed.

Basically the same as T182128 but keeping separate to preserve examples.

This issue just came in via Android Email feedback:

While using Wikipedia app for Android (Version 2.7.50341-r-2021-02-02), I encountered a bug/issue in dark mode, wherein using dark mode of the app sometimes fails to show formulae. Changing the mode to White/Sepia shows the same. Attached are screenshots of the same.
My device is OnePlus Nord, with OxygenOS 10.5.11.AC01DA

0.jpg (1×648 px, 123 KB)
0-1.jpg (1×648 px, 130 KB)

From email:
When using on dark mode, some contents highlighted with white background still use white font color.

Screenshot_20210729-161846_Wikipedia.jpg (2×1 px, 326 KB)

Screenshot_20210729-162659_Wikipedia.jpg (2×1 px, 374 KB)

MSantos subscribed.

@LGoto I couldn't find the wiki pages for the last examples, but the issue seems to be resolved globally. Please reopen this ticket in case I'm missing something.

Ahecht reopened this task as Open.EditedAug 17 2021, 2:33 PM
Ahecht subscribed.

There are some wiki pages that still do not display correctly in dark mode.

https://en.wikipedia.org/wiki/Green%27s_theorem, for example, still doesn't display correctly in dark mode (as does any page that uses image-based math templates such as https://en.wikipedia.org/wiki/Template:Intorient, https://en.wikipedia.org/wiki/Template:Oiint, or https://en.wikipedia.org/wiki/Template:Oiiint). As mentioned in T182128, this can be fixed by inverting images whose alt parameter begins with a "\".

Well duh. Those templates are using images. Why expect anything else?

What is the alternative for displaying math symbols not supported by TeX in such a way that the app doesn't render them invisible? See T182127

Change 713814 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/services/mobileapps@master] Display issues with math articles in dark & black mode

https://gerrit.wikimedia.org/r/713814

This came in via email feedback last week, maybe related:

Cannot read anything in expandable textboxes in dark mode as text colour is so similar to background. Please fix!!

@schoenbaechler did the user provided more information? Like pages where it's happening? Expandable textboxes are too vague and the user could be referring to something created by a template.

@MSantos I asked the user to provide more details — I’ll post it here if I receive it. Thanks!

This issue also shows up in Wikipedia app on iPad (some comments above suggest the issue is Android-only).

For the iPad issue, the erroneous display color only shows up in formulas displayed with <math display="block"> ... and the issue is fixed when changing such formulas to <math>. So the "block" style appears to be key.

An example English wikipedia page showing the issue (August 2022) is https://en.wikipedia.org/wiki/Correlation_function_(quantum_field_theory). To reproduce the issue: view that page on iPad, within Wikipedia app, and Dark mode preference.

A possible soution, for single-line formulae, is to change the formula to use :<math>. Note the optional colon at start to indent the formula, to retain some of the "block" behavior.

FYI: I posted about this issue in the English Wikipedia at https://en.wikipedia.org/wiki/Template_talk:Math#%22Display=Block%22_does_not_work_with_Dark_Mode In the interests of maximum communication, I'll duplicate my summary (from there) here in this issue:

  • There is a bug in the <math display="block"> MathXL formatter where it fails to work in the Wikipedia mobile app when the app has Dark Mode preference enabled. Bug has apparently been there since 2000.
  • The bug shows up on all mobile devices, including iPhone, Android, and iPad.
  • The bug is: when viewing forumulas in the Wikipedia mobile app (with Dark Mode preference enabled) math formulas are invisible if formatted with <math display="block">. They are invisible because the MathXL is using black text on a black background. The fix is to have the MathXL formatter respect the inline color and use white color for text (in the Dark Mode scenario).
  • This bug was reported to WMF at https://phabricator.wikimedia.org/T268279. The bug report was appended to an older, similar bug report. The WMF has not commented on the new bug report yet. Until the bug is fixed, an available workaround is to edit selected Wikipedia pages to change the formulas from <math display="block"> to the inline format :<math> (note the indent colon).
  • Changing a math formula from block-display to :<math> is generally okay, but has a couple of potential downsides: (a) According to this 2017 VP discussion using the block-display may be better for visually-impaired users of Wikipedia, because screen-reading apps have problems with the indent - I'm not sure if this is still a concern now, five years later; and (b) if the formula is wider than a full page width the block-display may help the user view the formula if the user narrows the page.
  • For that reason, the only formulas that should be changed from <math display="block"> to :<math> are those that are shorter than a full page width.
  • The long term solution is to have the WMF (or a volunteer) fix <math display="block"> so the mathXL produces HTML that works better in Wikipedia app in Dark Mode (i.e. the HTML should adopt to the text color of the current CSS, rather than force text to black).

Apologies in advance if this sort of verbosity or duplication is discouraged ... my goal is simply to facilitate communication.

Do we have any data on the error? Is it caused because "img.mwe-math-fallback-image-display { -webkit-filter: invert(1); }" alongside "img.mwe-math-fallback-image-inline { -webkit-filter: invert(1); }" in the getCssStyles in JavaScriptActionHandler.kt? How are the inline math images being inverted, because I deleted the "img.mwe-math-fallback-image-inline { -webkit-filter: invert(1); }", and it did not affect the output in wikipedia?

Comment from @Izno

I'm pretty sure all that's going on is that the apps are setting the CSS using the -inline selector instead of some more general math selector

Change 879066 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/services/mobileapps@master] Mobileapps: Display issues with math articles in dark & black mode

https://gerrit.wikimedia.org/r/879066

The patch above applies color inversion for img.mwe-math-fallback-image-display elements.

Change 879066 merged by jenkins-bot:

[mediawiki/services/mobileapps@master] Mobileapps: Display issues with math articles in dark & black mode

https://gerrit.wikimedia.org/r/879066

All looks good! confirmed as fixed.

Are we sure it is resolved? I downloaded the latest alpha version of Wikipedia, and the error is still there (such as in the Richardson Extrapolation article).

EDIT: nevermind, it is resolved now.

Are we sure it is resolved? I downloaded the latest alpha version of Wikipedia, and the error is still there (such as in the Richardson Extrapolation article).

I do not know if the change is deployed to where you would have access, so take this comment with that in mind: I think it would be wise to submit new tasks for specific pages with specific blocks or lines identified as being an issue. There seems to be a bunch of tasks in the apps area that have become bad examples of frankenbugs with "oh, here is an issue that looks like that issue" which don't identify the actual cause but simply similar symptoms. Which leads to bugs remaining forever open and not ending up actually resolved.

Are we sure it is resolved? I downloaded the latest alpha version of Wikipedia, and the error is still there (such as in the Richardson Extrapolation article).

I do not know if the change is deployed to where you would have access, so take this comment with that in mind: I think it would be wise to submit new tasks for specific pages with specific blocks or lines identified as being an issue. There seems to be a bunch of tasks in the apps area that have become bad examples of frankenbugs with "oh, here is an issue that looks like that issue" which don't identify the actual cause but simply similar symptoms. Which leads to bugs remaining forever open and not ending up actually resolved.

On that note, I believe I may have resolved that report. Template:Numbered_block, used for the equations with the numbers at right, was setting background:none. I have amended it.

Change 713814 abandoned by Vadim Kovalenko:

[mediawiki/services/mobileapps@master] Display issues with math articles in dark & black mode

Reason:

This fix probably should be applied to the Template:Intorient itsel + patch doen't solve the broader theme issue problem.

https://gerrit.wikimedia.org/r/713814