Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MathJax_Font_Test breaks responsive layouts in mobile browsers #681

Closed
zohooo opened this issue Dec 1, 2013 · 10 comments

Comments

Projects
None yet
4 participants
@zohooo
Copy link

commented Dec 1, 2013

MathJax adds a MathJax_Font_Test div into the body element when typesetting math formulas. Sometimes this div is too wide that it breaks responsive layouts, and add extra spaces to the web pages in mobile browsers.

In my case, I add viewport meta tag to the head of the html file

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

This makes my web page occupy the whole width of the browser. But when MathJax starts to typeset some formulas in this page, such as

$\xi\in(a,b),f'(\xi)=0$

It inserts a div of size 431px by 59px as follows:

<div id="MathJax_Font_Test" style="position:absolute;visibility:hidden; 
top: 0px; left: 0px;width: auto; padding: 0px; border: 0px; margin: 0px; 
white-space: nowrap; text-align: left; text-indent: 0px; 
text-transform: none;  line-height: normal; letter-spacing: normal; 
word-spacing: normal; font-size: 40px; font-weight: normal; 
font-style: normal; font-family: MathJax_AMS, Times;">
MATHJAX AMS ˆ&#xEFFD; &#xEFFF;</div>

At present, most of the mobile phones have device widths between 320px and 360px, therefore this div makes browsers add extra spaces to the page.

In desktop browsers, I could solve this problem by adding "overflow: hidden" to body element. But this way is not working in mobile browsers.

@pkra

This comment has been minimized.

Copy link
Member

commented Dec 1, 2013

Thanks for reporting this. Do you have a minimal live example to demonstrate what goes wrong (on which systems)?

@zohooo

This comment has been minimized.

Copy link
Author

commented Dec 3, 2013

In android 4.1, I have tested the stock browser, mobile firefox and mobile chrome with the following web page:

<!DOCTYPE html>
<html>
<head>
<title>MathJax Font Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
<style type="text/css">
html, body { margin: 0; width: 100%; overflow: hidden; }
#main { background: gray; }
</style>
</head>
<body>
<div id="main">\(\xi\in(a,b),f'(\xi)=0\)</div>
<script>
var width = window.innerWidth, height = window.innerHeight;
var main = document.getElementById("main");
main.style.width = width + "px";
main.style.height = height + "px";
</script>
</body>
</html>

You could see extra spaces in the right when draging the web page.

@zohooo

This comment has been minimized.

Copy link
Author

commented Dec 3, 2013

I'm wondering why we need so many characters MATHJAX AMS ˆ&#xEFFD; &#xEFFF; in MathJax_Font_Test div?

@pkra

This comment has been minimized.

Copy link
Member

commented Dec 4, 2013

Thanks for the example. I can reproduce the problem on Android 4.3 with the stock browser. This also happens on Chrome for Android (though less pronounced).

@dpvc is this expected behavior?

@pkra

This comment has been minimized.

Copy link
Member

commented Dec 4, 2013

Also confirmed on mobile Firefox for Android.

@dpvc

This comment has been minimized.

Copy link
Member

commented Dec 4, 2013

is this expected behavior?

It is something we know about, and it is working as it "should" based on the current font test mechanism, so in that sense, "yes". But it would be good to be able to avoid the problem. I suspect that one solution would be to clear the font test div after it is used, so that the long string isn't left in place, and the content size would not be excessively long. That is probably easiest.

We ran into this some time ago and I suggested to the user at the time to alter the font sizes used for the test (which apparently worked for him). It might be that we could do that, either conditionally for mobile devices, or if the width of the page is small, or by some other condition.

In any case, I think it can be fixed, and could be included in the bug fix release that we are planning.

@zohooo, the reason that the string is so long is that it helps to have more characters involved in order to be able to detect the difference in width that indicates the presence of the font. The font detection is delicate, and longer strings help make it more reliable.

@worldnamer

This comment has been minimized.

Copy link

commented Dec 20, 2013

Hey there. Any news about when this might happen?

I just put something like this into our page. It seems to at least clean up the problem, but it'd be nice to be able to remove the code at some point.

remove_div = function() {
  div = $("#MathJax_Font_Test");
  if (div.length > 0) {
    div.remove();
  }
  else {
    console.log("cannot find mathjax font div");
  }
}

MathJax.Hub.Startup.signal.Interest(function(message) {
  if (message == "HTML-CSS Jax - Web-Font TeX/Main/Regular") {
    MathJax.Hub.Queue(remove_div);
  }
});

dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 6, 2014

dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 7, 2014

@dpvc dpvc added Merged and removed Ready for Review labels Feb 7, 2014

@dpvc

This comment has been minimized.

Copy link
Member

commented Feb 7, 2014

=> Merged

@dpvc dpvc closed this Feb 7, 2014

dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 8, 2014

dpvc pushed a commit to dpvc/MathJax that referenced this issue Feb 8, 2014

@dpvc

This comment has been minimized.

Copy link
Member

commented Apr 22, 2014

I can't come up with a test case for this on one of the browsers we use in the test framework, so I'm marking it "do not write test case".

@pkra

This comment has been minimized.

Copy link
Member

commented Apr 22, 2014

+1

@dpvc dpvc added v2.4 and removed Merged labels Jun 30, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.