Rendering Problem: Android 4.x and \right)

[m0mo0815]

When using MathJax with the following configuration:

   <script type="text/x-mathjax-config">
MathJax.Hub.Config({ 
    skipStartupTypeset: true,
    jax: ["input/TeX","output/HTML-CSS"],
    extensions: ['tex2jax.js','jsMath2jax.js'], 
    TeX: { extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js","bbox.js"]},
    "HTML-CSS": { styles: {".MathJax_Display": {display:"table"}},width: "100px", webfont: "TeX", availableFonts: ["TeX"], preferredFont:"TeX"}
});
</script>
<script type="text/javascript" src="file:///android_asset/js/MathJax/MathJax.js"></script>

the

\right) 

in a special size will not render. Tex example:

\begin{align*}
4\log_9{(3*9^x)}+\ln{\left( \frac{e^x}{x}\right)}
\end{align*}

renders to

Some other hints:

• it appears with the standard mathjax fonts (SVG does fine, I will try out the STIX fonts when i get to manage it to add them to the android project)
  -I tested this example on android 2.2.2 and there it works - so it seems to be a problem of the webkit version used with android >= 4

You can find the user discussion here:

https://groups.google.com/forum/#!topic/mathjax-users/j0ohai-plEM

Best regards
stephan

[nikolajvonholck]

Hi

We have come up with the following solution:

The native browser does not read the provided .otf (opentype) fonts correctly. We've determined that the following glyphs cause problems (are invisible on Android 4.*):

• The right parenthesis "\right)" at size 2, 3 and 4 is invisible.
• The upper case A in both math italic and math bold italic is invisible.

We've tweaked the affected font files (a total of 5 files) and uploaded them in a zip-file on this thread (one cannot upload zip-files at GitHub..):
https://groups.google.com/d/msg/mathjax-users/j0ohai-plEM/_if2-RBBdNUJ

Guide
The following fix only works when using HTML-CSS output with TeX-fonts.
Copy all 5 files to /fonts/HTML-CSS/TeX/otf/ and overwrite when prompted.

Tested on
Samsung Galaxy SIII (GT-I9300) running 4.2.2)

This is a very strange problem indeed. We hope that this will come in handy for everybody experiencing similar behavior.

Best regards
Nikolaj
Appellante

[dpvc]

Thanks for coming up with a solution. Can you say what you did to the files? Also, have you made an exhaustive check that these are the only glyphs affected, or are those just the ones you know about?

[dpvc]

I see that the fonts are the off versions. Did you try the woff versions? Do they also need to change? (I'm not sure what you might have included in your app.)

[nikolajvonholck]

The built-in browser on Android seems to have a strange problem with reading otf fonts.

First off we were only aware of a problem rendering \right). We tried switching from HTML-CSS to SVG where the \right) worked fine (as reported by m0mo0815). Unfortunately scrolling was slow and and font weight was too thick. We found this issue on GitHub and after reading the thread on Google Groups we realized that the problem hadn't been solved. Therefore we decided to try and track it down.

We use a minimal version of MathJax 2.3 in our apps. Since it was hard to debug within our app we configured a http-server with our MathJax installation and learned the following:

• We were experiencing the same bug while using the Android built-in browser (online) like with the WebView (offline) within our app (expected).
• When using Chrome on Android everything worked fine (strange, but also reported on Google Groups). Apparently they use different versions of WebKit.

Subsequently we configured a proxy server so that we could monitor which files were being requested by the Android device. We learned that MathJax is requesting otf fonts in the built-in browser, but woff fonts in Chrome. Do you know why this is? Perhaps this is an indicator that we should try using the woff fonts instead (as you are suggesting). Can you explain how to force MathJax to only serve woff fonts? We don't know how to do that.

Anyway we continued to try and track down the problem. We looked around in the source code and found /jax/input/TeX/jax.js. Here ")" is mapped to ")" (line 676 in the unpacked code) in MathJax. We tried mapping it to the glyph 0028 = "(". Now the "(" showed up instead of ")". Based on this we assumed that something was wrong with the glyph in the otf-fonts.

We deleted glyph 0029 ")" and added it in again by duplicating glyph 0028 "(", flipping it horizontally and adjusting the margins. Now everything worked fine. We did this for Size-2, Size-3 and Size-4. Size-1 had no problems.

The thread on Google Groups also reported the same bug with capital "A". We hadn't discovered this yet since we only use a subset of all the glyphs MathJax provides, but we decided to test the following glyphs:

Letter-test
\[
abcdefghijklmnopqrstuvwxyzæøå \\
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ
\]
\[
\boldsymbol{abcdefghijklmnopqrstuvwxyzæøå \\
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ}
\]
\[
\mathrm{abcdefghijklmnopqrstuvwxyzæøå \\
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ}
\]
\[
\mathbf{abcdefghijklmnopqrstuvwxyzæøå \\
ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ}
\]
\[
\text{abcdefghijklmnopqrstuvwxyzæøå}
\]
\[
\text{ABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ}
\]
Brace-test
\[
[]\left[ h \right] \left[ h^2 \right] \left[ \frac{s}{t} \right] \left[ \frac{\frac{s}{t}}{\frac{s}{g}} \right]
\]
\[
() \left( h \right) \left( h^2 \right) \left( \frac{s}{t} \right) \left( \frac{\frac{s}{t}}{\frac{s}{g}} \right)
\]
\[
\{\} \left\{ h \right\} \left\{ h^2 \right\} \left\{ \frac{s}{t} \right\} \left\{ \frac{\frac{s}{t}}{\frac{s}{g}} \right\}
\]
Number-test
\[
\boldsymbol{1234567890}
\]
\[
\mathrm{1234567890}
\]
\[
\mathbf{1234567890}
\]
\[
\text{1234567890}
\]
Greek-test
\[
\boldsymbol{\alpha \, \, \theta \, \, \tau  \, \, \beta \, \, \vartheta \, \, \pi \, \, \upsilon \, \, \gamma \, \, \varpi \, \, \phi \, \, \delta \, \, \kappa \, \, \rho  \, \, \varphi \\
\epsilon \, \, \lambda \, \, \varrho \, \, \chi \, \, \varepsilon \, \, \mu  \, \, \sigma \, \, \psi \, \, \zeta \, \, \nu  \, \, \varsigma \, \, \omega \, \, \eta \, \, \xi \\ 
\Gamma \, \, \Lambda \, \, \Sigma \, \, \Psi \, \, \Delta \, \, \Xi \, \, \Upsilon \, \, \Omega \, \, \Theta \, \, \Pi \, \, \Phi}
\]
\[
\mathrm{\alpha \, \, \theta \, \, \tau  \, \, \beta \, \, \vartheta \, \, \pi \, \, \upsilon \, \, \gamma \, \, \varpi \, \, \phi \, \, \delta \, \, \kappa \, \, \rho  \, \, \varphi \\
\epsilon \, \, \lambda \, \, \varrho \, \, \chi \, \, \varepsilon \, \, \mu  \, \, \sigma \, \, \psi \, \, \zeta \, \, \nu  \, \, \varsigma \, \, \omega \, \, \eta \, \, \xi \\ 
\Gamma \, \, \Lambda \, \, \Sigma \, \, \Psi \, \, \Delta \, \, \Xi \, \, \Upsilon \, \, \Omega \, \, \Theta \, \, \Pi \, \, \Phi}
\]
\[
\mathbf{\alpha \, \, \theta \, \, \tau  \, \, \beta \, \, \vartheta \, \, \pi \, \, \upsilon \, \, \gamma \, \, \varpi \, \, \phi \, \, \delta \, \, \kappa \, \, \rho  \, \, \varphi \\
\epsilon \, \, \lambda \, \, \varrho \, \, \chi \, \, \varepsilon \, \, \mu  \, \, \sigma \, \, \psi \, \, \zeta \, \, \nu  \, \, \varsigma \, \, \omega \, \, \eta \, \, \xi \\ 
\Gamma \, \, \Lambda \, \, \Sigma \, \, \Psi \, \, \Delta \, \, \Xi \, \, \Upsilon \, \, \Omega \, \, \Theta \, \, \Pi \, \, \Phi}
\]

We learned that upper case A was invisible in Math-Italic and Math-BoldItalic, but showed up just fine in roman/regular text. We now used almost the same method as before by copying the stroke from A, duplicating the Italic glyph D and replacing the strokes by pasting all the strokes from A and adjusting the margins. Now the capital A was showing up just fine, but then we observed something that we still do not understand: The glyph for capital B turned invisible. We then did exactly the same with the glyph for B (duplicate D, copy-paste stroke and adjust margins). Everything seems to work fine now.

Precisely the same happened while attempting to fix the upper case A in BoldItalic.

Perhaps we should try using woff fonts instead - how can we test that?

Our solution isn't the best one since we don't really know if we have destroyed any other glyphs in the process (as with the glyph for B). But at least everything works in our limited test (screenshots are taken in Chrome for Mac, but everything shows up on Android and looks the same):

[dpvc]

Thanks for the detailed explanation. I appreciate knowing what changes you made to the fonts, and how you diagnosed the problem. I issue with the italic B is a bit disturbing, and I don't know what to make of it, either.

As for the off versus woff, MathJax requests both (with woff being preferred), so if it is choosing the off, that means the woff version is not supported by the browser. I guess that means a pretty old version of WebKit. In any case, you can't force it to use them since it doesn't seem to support them.

[nikolajvonholck]

Too bad with the woff files. I believe you are right in your assumption about the WebKit version of the build-in Browser/WebView.

It is indeed troubling with the uppercase B - just to make it clear: The exact same thing happened to the bolditalic B. Do you know how the otf font files were originally generated?

This workaround is only meant to be a temporary solution, since we have no previous experience with editing font files (this is the first time we've heard of the word "glyph"..).

Perhaps somebody with a greater knowledge of font creation can look into the problem?

[nikolajvonholck]

Perhaps this is a duplicate of (or at least related to) issue #403?

[nikolajvonholck]

FYI I have tested on another device running Android 4.0.4 and I cannot reproduce the problem here.

[dpvc]

Perhaps this is a duplicate

Yes, it does appear to be the same.