Welcome to our community

Be a part of something great, join today!

Rendering Mathjax On Mobile Device

  • Thread starter
  • Admin
  • #1

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
8,687
Inline MathJax does not render properly on a mobile device.
Typically it overlaps with the surrounding text.
E.g. in this line the expression $ax^2+bx+c$ overlaps with the surrounding text - but only on a mobile device.
On a tablet it works correctly.

I thought there was little we could do about it... until I discovered that it does render correctly on a different site.
For instance in this thread.


The relevant configuration there (embedded in every page) seems to be:
Code:
MathJax.Hub.Config({
    "HTML-CSS": {
        preferredFont: "TeX",
        availableFonts: ["STIX", "TeX"],
        linebreaks: {
            automatic: true
        },
        EqnChunk: (MathJax.Hub.Browser.isMobile ? 10 : 50)
    },
    ...
});
as opposed to what we have on MHB:
Code:
MathJax.Hub.Config({
    ...
    "HTML-CSS": { linebreaks: { automatic: true, width: "90% container"} } , 
    ...
});
Can we try and fix this on MHB?
 

Greg Bernhardt

Administrator
Staff member
Feb 3, 2012
129
Re: Rendering MathJax on mobile device

Appears there is a cloudflare issue with MJ. Both configurations should work fine on mobile. Nothing special is needed.
 

Jameson

Administrator
Staff member
Jan 26, 2012
4,029
Re: Rendering MathJax on mobile device

What about now, ILS?
 
  • Thread starter
  • Admin
  • #4

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
8,687
Re: Rendering MathJax on mobile device

What about now, ILS?
Thanks Jameson.

I'm actually a bit confused.
When I checked this thread on my mobile device yesterday after creating it, I expected to see the inline latex to overlap - but it didn't. That was before the Cloudflare issue was fixed, which apparently did not affect mobile devices.
Today there is no change, although I can see that the MathJax configuration is now as I suggested.

The current state was and is that in portrait mode the formula is smaller than it should be (about half the height).
And in landscape mode, the formula is exactly right.
In both cases there is no overlap (any more) and the formula fits seamlessly between the text.
So it seems this has been fixed fairly recently presumably by MathJax or Android.

Either way, the thread on PF that I mentioned shows a proper font size and a seamless fit both in portrait and in landscape mode. As yet I don't know why that is.
 

Jameson

Administrator
Staff member
Jan 26, 2012
4,029
Re: Rendering MathJax on mobile device

Hmm, I will try to look into this some more. My first thought is that we don't have a true comparison to PF since the site designs are different. There could be wrapping rules inside any number of elements on our page. I think we should try to reproduce the problem on the simplest place possible. I will brainstorm and post back soon.
 

MarkFL

Administrator
Staff member
Feb 24, 2012
13,735
Re: Rendering MathJax on mobile device

ILS,

I have sent you a visitor message with $\LaTeX$ embedded within text, however, unbeknownst to me, $\LaTeX$ doesn't render there. I have made a change to the appropriate template to (hopefully) allow it, but as our templates are cached, the change isn't in effect yet. :)
 
  • Thread starter
  • Admin
  • #7

Klaas van Aarsen

MHB Seeker
Staff member
Mar 5, 2012
8,687
I see what you mean. The formulas on my conversation page do not render at all.

Oh, and the problem with inline formulas still exists after all. It works correctly in my OP, but the $\LaTeX$ in your post shows the problem. Perhaps it only happens with back slashed words.
I've noticed that Jameson changed the configuration back, so now I don't know yet if it helps after all or not.
 

MarkFL

Administrator
Staff member
Feb 24, 2012
13,735
I found a workaround to the cloudflare issue, and so $\LaTeX$ now renders in visitor messages. :)