Of historical interest only: Providing a user level setting to select MathJax output mode (chtml vs. svg)

[taniwallach]

The idea of providing a user level setting to change MathJax display output format is moot. @dpvc points out below that a change made in the context menu is sticky.

The discussion remains of interest primarily due to the discussions around how to change the default at the server level, and that of the Firefox rendering issues with CHTML output at some zoom levels.

---

Some browsers (notably FireFox at present) run into issues rendering thin lines in MathJax (when using chtml output mode) at various magnification levels due to what seems to be a browser issue.

WeBWorK problems on WW 2.16 run into this problem when users are using recent versions of Firefox at present, as noted in #1524. This bug leads to students not seeing the correct mathematical expressions in their problems. See also the the MathJax issues listed below. I now have a report of a similar problem with Chrome.

It seems that this bug only occurs with MathJax's chtml = CommonHTML (HTML+CSS) output mode, which seems to be preferable when it works (as it allows cut and paste). chtml is the only MathJax output mode currently directly used by WeBWorK.

However, in all the cases where I have seen there being problems with MathJax's output in browsers changing to the SVG output mode of MathJax overcame the problem and the visual rendering of the expression would be correct.

As such, it might be convenient to allow a user to request that WeBWorK use SVG output mode for MathJax for his account, rather than recommending that users with such rendering issues change their settings to use the "images" display mode. Due to the general advantages of chtml over svg output from MathJax, I would not recommend forcing MathJax into svg output by default.

Supporting this would require:

1. Providing a mechanism in the user settings for a user to switch MathJax's output mode and storing the setting in the database.
2. Changing the mechanism by which MathJax's JavaScript code is loaded, so the file to load would depend on the setting and be either mathjax/es5/tex-chtml.js or mathjax/es5/tex-svg.js are requested by the user's setting.
   - From what I see, the file mathjax/es5/tex-chtml.js is being included via:
   1. system.template file and gateway.template file, and via
   2. @JSLoads in lib/FormatRenderedProblem.pm for html2xml
   • Both locations hard code the use of tex-chtml.js

@drgrice1 @mgage @pstaabp What do you think about this idea?

---

MathJax issues related to this:

• overline/underline issue not resolved mathjax/MathJax#2795
• Straight lines of \vmatrix{} doesn't show up on Firefox mathjax/MathJax#2732
• Vertical double bar not rendered in Firefox on Linux mathjax/MathJax#2741
• \left\Vert \frac{}{} \right\Vert doesn't work in firefox mathjax/MathJax#2844
• Using HTML-CSS renderer, hlines and column separators are not always displayed mathjax/MathJax#1095 (quite old)
• 2.6-beta: Horizontal lines can be lost in CommonHTML output mathjax/MathJax#1279 (quite old)

Firefox bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1741887

[pstaabp]

Including another output option seems quite reasonable although unfortunate since it is two steps removed (not mathjax's error, but Firefox's). I'll let @drgrice1 weigh on on viability of adding this.

In terms of user experience, will students know that they need to switch output modes? I can see a student just trying to work through problems and not know that the problem is output incorrectly. I would say with current WeBWorK to not use Firefox right now--although I realize I haven't even told my students this.

[drgrice1]

I do not agree with telling students not to use Firefox. In fact, I recommend that students either use Firefox or Google Chrome. I have not seen any significant issues with MathJax for the problems that I use in my courses on either of those browsers. Although my problems do not use \overline.

I will try to check into what would be needed to add such an option.

[taniwallach]

I have not seen any significant issues with MathJax for the problems that I use in my courses on either of those browsers. Although my problems do not use \overline.

When the bug was "only" with \overline and other similar horizontal extenders, it did not seem nearly as problematic to me as it does now. It is now also known to affect the \left| and \right| symbols also for some browsers. I suspect they are more widely used.

Have a look at the formulas below:

\( \left| \, \left( z_1 \cdot z_2 - \overline{z_3} \, \right)^3 \, \right| = \)

and

\( \ln \left| 5 x + {} \rule{0pt}{14pt} \text{input box was here} \right| \)

in Firefox (94+, and at present in 98.0.2 from flatpak) at many different zoom levels (Windows or Linux) on a WW 2.16 site using MathJax in chtml mode. When I do that, I typically see the \left| and \right| symbols disappear at some zoom levels (typically 80% and some smaller values) and the \overline disappear at some zoom levels.

The \left| and \right| symbols disappear in Chrome 100 on some Windows 10 and Windows 11 systems at some zoom levels. In Chrome on Windows the symbols were missing also at some "large" zoom levels (175%, 200%) on one PC I tested on.

The first report of problems with Chrome I received were from 4 days ago. However, when looking into it, I found that there are issues on the GitHub of MathJax about such issues in Firefox dating back quite a while.

[drgrice1]

I am not seeing the \left| and \right| issue at the default zoom level on Firefox. I tested with Firefox 98.0.2 on Ubuntu 20.04.

This is what I see on Firefox with the equations you posted:

I don't see the \overline, but do see the \left| and \right|.

Here is what I see in Chrome 98.0.4844.84 on Ubuntu 20.04:

Here I see everything.

Although the above is only at the default zoom level. At other zoom levels sometimes the \overline is visible and sometimes not, and the same with the \left| and \right|.

[taniwallach]

Exactly - at some zoom levels some of these things fail to appear. That means that students can end up seeing an incorrect formula if they are using a zoom level for which something fails to appear on their browser. It seems that some users either change their default zoom level or just encounter problems at 100%. Since the problem is not all that predicable, it

It is not certain that the behavior is consistent on different machines in terms of what appears/disappears at different zoom levels.

I have yet to see a case where the SVG output runs into a similar problem.

[dpvc]

Note also that the output render can be changed in the MathJax contextual menu, and that the setting is sticky, so there is already a technique for students and teacher to change this individually, if you haven't disabled the MathJax menu (I don't remember if you do).

[drgrice1]

We do not disable the MathJax menu.

[drgrice1]

@taniwallach: You mention that the reason that chtml is preferable is that it allows cut and paste. However, that actually isn't true. Cut and paste does not work with either chtml or svg output. Not with the usual selection methods at least. You can right click on a MathJax object, and select "Copy to Clipboard" as either "MathML Code" or "TeX Commands". That works with both renderers, although it isn't quite the same.

[taniwallach]

I certainly am not comfortable with the current situation where some equations are not being displayed properly in Firefox, and now apparently in some user's version of Chrome/Edge. They certainly have no method to know in advance that something is not being displayed properly. For the \overline issue I added a warning about the problem to several problems where that was causing trouble. If the new report of missing \left| and \right| turns out to be a widespread issue - I certainly do not have a good idea of how to help the end users.

@drgrice1 You are correct - cut and paste from MathJax does not work now. However, it certainly did in the past (see the discussion at openwebwork/pg#517). It seems that the change to MathJax version 3 changed this. There is a discussion about that in mathjax/MathJax#2240 and some ideas for how making the equations copy-able for people who want to restore that functionality. I don't think I really mind there being a need to type formula at least once, even if they are somewhat long/complicated.

Given that copy-paste is no longer relevant - it could be that a much simpler approach to trying to get MathJax working more dependably for those users running into problems would be to just change to using the SVG output mode of MathJax as the default.

I'm not sure if there are any significant downsides to such a change. The MathJax site https://docs.mathjax.org/en/latest/output/svg.html mentions a disadvantage with "variable-width tables" and window resizing.

[dpvc]

@taniwallach, You probably won't run into any of the downsides for SVG in WeBWorK problems.

@drgrice1, copy/paste in CHTML should be available again after the next release.

[taniwallach]

In WeBWorK 2.16, there is a setting which can be set in course.conf or in localOverrides.conf which will easily change MathJax to svg output mode for "regular" content:

$webworkURLs{MathJax} = "$webworkURLs{htdocs}/mathjax/es5/tex-svg.js";

I suspect that will not work in develop, as the changes in #1599 modified the lines which load MathJax in the theme template files and file filename is now provided in the template file.. The WW 2.16 files have

<script type="text/javascript" src="<!--#url type="webwork" name="MathJax"-->" id="MathJax-script" defer></script>

while develop now has:

<script src="<!--#url type="webwork" name="htdocs" file="node_modules/mathjax/es5/tex-chtml.js"-->" id="MathJax-script" defer></script>

[drgrice1]

@taniwallach: You can change the mathjax file site wide with the new system by modifying the file /opt/webwork/webwork2/htdocs/static-assets.json after you run ./generate-assets.js to generate that file. In that file you will find the line

"node_modules/mathjax/es5/tex-chtml.js":"node_modules/mathjax/es5/tex-chtml.js"

Change that to

"node_modules/mathjax/es5/tex-chtml.js":"node_modules/mathjax/es5/tex-svg.js"

or if you wish to use a CDN then change it to

"node_modules/mathjax/es5/tex-chtml.js":"https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-svg.js"

Although, I might try to implement another way to change this from a config setting if I have time.

[taniwallach]

Thanks. I'm happy to hear that there is some easy fix at the site level to swap to MathJax SVG output for the new system.

I think that for the short term - having that option probably suffices for most sites who have users running into display problems with MathJax chtml output. At present, I have not seen or heard about similar display issues with the SVG output. Now that my site is using SVG for all courses, if there are any major problems - I would expect to start to get complaints in the next few weeks.

[drgrice1]

I think that we should change the default for MathJax to be to use SVG output instead of CHTML. Although I would also like to get @dpvc's opinion on this.

[taniwallach]

I think that we should change the default for MathJax to be to use SVG output instead of CHTML. Although I would also like to get @dpvc's opinion on this.

The FireFox bug which messes up MathJax CHTML rendering of thin line still exists in FireFox 102.0.1 (run via flatpak on Linux). Different lines appear/disappear at different zoom levels.

After several months of using the SVG output with no complaints on WW 2.16, I certainly think that changing to the method which apparently behave reliably on more browsers is the way to go.

However, making a system wide change to SVG for WeBWorK 2.17 is not as simple as it was in the past. The method of changing to SVG by locally modifying /opt/webwork/webwork2/htdocs/static-assets.json after it is generated is not a "stable" change. The change needs to be manually redone whenever that file is updated.

As discussed above - the "cut and paste" benefit of CHTML which existing in MathJax 2 is not relevant in MathJax 3.

@drgrice1 @pstaab @mgage @dvpc Maybe we should make a hotfix to change the default to SVG for the new release?

[maharper]

I have switched MathJax to SVG output on our system, first in one course for testing, now as the site default. Our production system is running WeBWorK 2.16

• $webworkURLs{MathJax} = "$webworkURLs{htdocs}/mathjax/es5/tex-svg.js"; in course.conf or localOverrides.conf seems to work seamlessly.
• The display issues in problems, in particular the disappearing overlines, don't occur in SVG output. I checked all the problems, local and OPL, that were reported earlier by teachers here as having display issues.
• No issues with SVG output have been reported so far (three days) with one exception.

The Problem Viewer display breaks in certain versions of Firefox.

SVG output:

This is relatively easy to work around and so far shows up only for a single problem author using Firefox. I will keep our system on SVG output for the time being.

[drgrice1]

@taniwallach I am fine with that.

[drgrice1]

@dpvc: Thanks for the information. Hopefully the display issues for CHTML are resolved also. Then we can switch back.

[dpvc]

The CHTML font updates aren't yet made, so I can't tell, but I am hoping so. The v3 fonts are actually the old v2 fonts from back in 2009, and will likely be replaced by newer ones, and I'm hoping that resolves the Firefox issue. It just hasn't been done yet.