Rendering Error on Android > 4. - missing bracket

[Stephan Claus]

Hello guys,

I have a weird problem which drives me crazy:

I'm using MathJax with the following configuration (with direct setting because android has problems with file:\\\ statements and url parameters how  Leathrum pointed out: http://cs.jsu.edu/wordpress/?p=498)

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        skipStartupTypeset: true,
        jax: ["input/TeX","output/HTML-CSS"],
        //jax: ["input/TeX","output/SVG"],
        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: null, preferredFont: "STIX"}
});
</script>

<script type="text/javascript" src="file:///android_asset/js/MathJax/MathJax.js"></script>

When I now render terms like:

\begin{align*}

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

\end{align*}

all is perfect except that the "\right)" command is not handled very well - it simply does not appear. (See the screenshot).

I already tried to replace the "old" otf fonts with the current files, but that did not do the trick.

Do you have any suggestions in which direction I could further investigate? SVG Output is not really an option - although the right bracket is rendered, I would like to have the better scaling opportunity with the HTML-CSS output.

Every idea apprechiated! :)

Best regards
stephan

[Thomas Leathrum]

At this point, all I can do is confirm the problem, but I *can* confirm and reproduce it.  The problem is specific to the right parenthesis in that size -- if I use \right], the bracket shows up fine, and if I change the internal expression to get smaller or larger parentheses, they show up fine.  It seems to be a problem with MathJax getting the right glyph from the OTF font for that specific size of right parenthesis.  I haven't tested in other places, but since Android WebView is Webkit-based, this issue should also appear in other Webkit settings, such as Chrome and Safari, although Android WebView uses a somewhat older Webkit version.  It looks like this would be a good thing to submit on the bug tracker.

[Stephan Claus]

Hello Thomas,

I am glad that I am not only one with this problem. I thought about the webkit problem as well and tested the problem on Safari 5.1.7 and Chrome 23.0.1271.95 () and it works fine there. On iOS the Problem does not appear as well, not in the browser or in a webview.

I checked this issue on an older android device and I can confirm that on android 2.2.2 the parenthesis is rendered well - I think there was a major change of the webkit version from 2.x to 4.x.

I'm going to create a ticket on the bugtracker, hope that it is not a big thing.

Do you have any ideas how I could "solve" this problem in a quick and dirty approach? Like just rendering this spezific parenthesis with the SVG Version? :)

Is there any way that I could debug the problem further? How can I get the font file where the bracket is containend and perhaps where the sign is adressed at jax/output/HTML-CSS/fonts/Stix?

Best regards
stephan

[Peter Krautzberger]

Have you tried including the MathJax fonts instead of the STIX fonts? 

FYI Android 4 is using Chrome ~18 as a browser, so that's probably the level to expect (and Chrome 18 had lots of bugs for MathJax to deal with...).

[Stephan Claus]

Hello Peter,

am I right that I just have to set preferredFont: to "TeX"?

I will try this out and report!

Best regards
stephan

[Peter Krautzberger]

Actually, looking through Tom's app again. Are you using his asset file? I.e., are you shipping the STIX fonts at all? 

If you're not, then MathJax is already falling back on the MathJax fonts included in Tom's asset file -- in which case, you could also try a) shipping STIX fotns b) replacing the otf version with the woff version of the MathJax fonts.

[Thomas Leathrum]

The WOFF fonts don't seem to deliver correctly from the assets directory in an app (which is why I set up the app assets with the OTF fonts).

Best regards,
stephan

[Stephan Claus]

Actually, looking through Tom's app again. Are you using his asset file? I.e., are you shipping the STIX fonts at all?

I use his asset file. The STIX command was taken from the iOS Version but as you already mentioned it is falling back to the included MathJax fonts.

If you're not, then MathJax is already falling back on the MathJax fonts included in Tom's asset file -- in which case, you could also try a) shipping STIX fotns b) replacing the otf version with the woff version of the MathJax fonts.

 As Tom pointed out, I would skip variant b)

@Tom: Did you try to add the STIX fonts to your App just for test purposes? (I know that the STIX fonts are much bigger in file size, but I would like to try if it would solve the problem)

I found this way for implementing custom fonts to android: http://stackoverflow.com/questions/5634245/how-to-add-external-fonts-to-android-application

I'm just a bit confused about the line: "While I was experimenting, it worked just for a subset (on Windows the ones whose name is written in small caps)."

Is it possible to set all the STIX fonts  to lowercase in MathJax? Or would this produce an error?

Best regards
stephan

[Yasuaki Honda]

Dear all,

I am new here and if I do (or write) something funny or wrong or already known, please forgive me. I would like to add my experience and workaround on this issue.

I am a developer of 'Maxima on Android', port of Maxima CAS on Android OS (You may find it on Google Play). As it uses Mathjax 2.1 on webview for rendering the output of Maxima. Hence, I saw exactly the same issue as you all see.

Workaround I found was to use SVG instead of HTML. To be more specific, I found the followings:

- The original test/sample-dynamic-2.html (which I used for my development base) has the issue of the missing close paren on larger size when used in webview.

- I changed the file so that config=TeX-AMS-MML_SVG

- The file works fine.

I tested above on Nexus 7 running Android 4.2.

The only drawback I noticed is that SVG is not supported on older webivew (such as on Android 2.2). So, I switch the mathjax HTML file (HTML based config or SVG based config) depending on the underlying OS version.

Yasuaki Honda, Chiba, Japan

2012年12月29日土曜日 17時52分20秒 UTC+9 Stephan Claus:

[Stephan Claus]

Hello Yasuaki Honda,

thanks for your feedback. As mentioned above, the SVG outputs works fine but has some small drawbacks.

But you are right - as long as I do not know if this bug with the right parenthesiscan be fixed i will use your solution.

Best regards
stephan

[tanin...@gmail.com]

Hey while developing an android app for devices ranging from android 2.3 to 4.2, even I ran out of same problem. I was originally testing on our phones which has Gingerbread and all formulae were rendered perfectly. Though I was astonished to see that the missing right parentheses as well as 'A' in math mode i.e. \(A\) was also not rendered in Nexus 7 emulator. So seeing that this thread was started many months ago, I was wondering if this problem was solved? Or maybe if someone can suggest me a better alternative than developing two different versions of apps, one for >= 4.0 and one for < 4.0. Thanks.

<offtopic>
On a sidenote, I am using very minimal version of mathjax so that the app size is reduced. But still the time taken for rendering whole page is considerable (20-30 seconds) on low end devices. Is there any method to speed up mathjax rendering or bypass it (like getting a HTML - CSS source of file once, and then using that code to load page quickly in the future)?
</offtopic>

Thank you.

[Dayal Purohit]

When someone using my math app reported to me that the letter A was invisible in his tablet, so it may not be the Nexus 7 emulator but the actual device too.

D^3P

[tanin...@gmail.com]

Yes, I could confirm it with a user of Jelly Bean device (Samsung Galaxy Note 2). But have you found any solution to that problem?

[Dayal Purohit]

My app had bundled a minimal version of MathJax, so I thought that it could be because of that. The app was working offline with everything self contained. I added the option to work online with the CDN version of MathJax and the problem does not arise in the CDN version. So, my minimal version of MathJax has that problem.

D^3P

[Peter Krautzberger]

@Tanmay,

The main problem for us at MathJax is to reproduce the bug. Debugging within Android apps/webview is difficult. But if you can provide a minimal example app, that would help. Since we don't have any Android experts on our team, we'd appreciate any help from the community. As mentioned earlier in this thread, webview seems to have less problems with the SVG-output.

Regarding speed, I'm afraid there's not much you can do about it except display smaller chunks of content. The speed has practically nothing to do with MathJax installation size -- it's the rendering process that takes a long time. Basically, the trouble is that MathJax needs the browser to layout the page repeatedly for it to calculate placements correctly. Since browsers are not optimized for repeated layout this comes down to CPU power -- where mobile devices are, of course, much less powerful. We're currently investigating new approaches to the rendering process, but that's a long term development, I'm afraid.

@Dayal, 

it's really surprising to hear that CDN vs local is different. Would you be able to create an minimal sample app?

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[tanin...@gmail.com]

Actually I am quite puzzled how to write all the required code here, but actually tbh I am using the same mathjax assets as Leathrum's app, so I guess it will be reproducible with it. The conditions for reproducing the bug are:
1. Any device with Jelly Bean (e.g. Nexus 7, Galaxy Note 2).
2. Webview loading with html file having same JavaScript setup as Leathrum's app.
I am providing a html which is rendered poorly in Jelly Bean, but if you would like, I can also share a link to git repository with you.
Here's the html:
http://pastebin.com/ux7iCitg
Nowhere in this html, the letter 'A' would be displayed if used with setup described above.
Hope that helps.

[tanin...@gmail.com]

Okay, thanks to my partner, I can link you to a minimal app which can reproduce the problem:
https://www.dropbox.com/s/c7nncvheeha47nc/Sample.zip

[Dayal Purohit]

The reason for the difference is that in the local minimal version of MathJax that I bundle in the Android App tries to include all the necessary font files. The necessary font files to be included was discussed quite some time ago by Thomas Leathrum and others. I think some more font folder files need to be included in the minimal version. That is the reason the local MathJax version fails to display some characters and symbols. But of all things the letter A does not get displayed in Nexus 7 for some reason. And, if one enables the app to work online and use the CDN version, the letter A is displayed just fine in the same Nexus 7. 

You can see from the below routine which A does not get displayed in the Android app with the local version of MathJax. Mind you that my local version of MathJax is less than 1.5MB in size.

http://mathematics.jds.com/routines.jsp?routine=8

If you click 'show answer', you will see the substitution A = this and B = this. For some reason A does not get displayed in Nexus 7.

D^3P

[Peter Krautzberger]

I've seen similar behavior in other Android apps, see https://github.com/mathjax/MathJax/issues/403?source=c.

Peter.

[Dayal Purohit]

That is interesting. I have Xoom with Android 4.1.2, and I have no problem with my local minimal version of MathJax. Also, no problem with my Kindle Fire.

D^3P

[Dayal Purohit]

I have now noticed that in my minimal MathJax bundle, \left and \right are some how not being rendered. I have not updated my minimal MathJax bundle since the last major update of MathJax. I may have to do that. I know there was an article somewhere, a recent one, about what should go in a minimal copy. I thought I had put a star to it, but it is not there, I will have to look for it further.

d^3p

[Peter Krautzberger]

Are you looking for https://github.com/mathjax/MathJax-docs/wiki/Guide:-reducing-size-of-a-mathjax-installation ?

--

[Dayal D. Purohit]

Yes, I thought I had starred it, but somehow it did not get starred I guess. Not sure if this setup will take care of some of the rendering, but I will report next week.

Thanks,

d^3p

--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/j0ohai-plEM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.

For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Mathematics Online
http://www.jds.com

[Peter Krautzberger]

Since webview is quite different from mobile Chrome, it's harder to track down issues. 

If you find bugs, we'd love your help in tracking them down.

Peter.

[Dayal Purohit]

Sure will do.

d^3p

[jeremypat...@gmail.com]

I have a fix, it's not really clean, but it's useful if you're in a hurry : 

(you need jquery)

MathJax.Hub.Queue(function(){

$(".MathJax").find("span").each(function(){

if($(this).html()==')'){

size = $(this).css('font-family');

$(this).after('<span style="font-family :' + size +'">) <a style="display : none">_</a></span>')

$(this).remove();

}

});

});

The idea is to remove the parenthesis and add it back, with an invisible character that will make everything work magically...

[nikolaj...@gmail.com]

Hi

We have had the same problem and since it hasn't been fixed (https://github.com/mathjax/MathJax/issues/369) 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 attached them in a zip-file.

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

[shreni....@gmail.com]

After replacing all 4 files..I still get missing right brackets..
Please help me
Thanks...

[Nikolaj Ingemann von Holck]

Hi

I have made an archive of all the font files in /fonts/HTML-CSS/TeX/ and attached it. Try using these files instead – they have been improved during the last three months. Remember to make a clean build in order to clear the cache.

The issue remains unresolved (https://github.com/mathjax/MathJax/issues/403) in the official version of MathJax.

Good luck :)

Best regard,

Nikolaj

Appellante