MathJax in UIWebView causes view width to expand too much during typeset
Cameron Fulford
Background:
I am using a local install of MathJax in an iOS 6 app (writting using C# MonoTouch tools) in order to render equations inside a UIWebView. I have it working such that I can programmatically create a new web view with a default html file with an empty body (except for a div), then dynamically add TeX into the div and have MJ typeset it nicely.
My web view is actually a subclass of UIWebView so that I can override the properties that control its intrinsic content size, since what I want is to end up with a web view that does not scroll and resizes itself according to its content. So, to do that I observe changes in the UIWebView's scroll view content size (the part that normally scrolls through the web page depending on its content), and update my web view's intrinsic size to that size so that it displays everything and no longer needs to scroll. My goal is to have my container web view display all the content (typically an equation that won't span more width than the screen) without scrolling and tightly hug the content it contains.
The problem:
It seems as though the Typeset command causes the width of the page's scroll view to increase quite a bit (488 seems to be the magic number) and I suspect it has to do with the required size it wants to use for displaying messages (even though I have configured messageStyle: "none" to hide MJ messages). Once that causes the scroll view width to increase, my web view resizes itself to that larger size and no longer shrinks down to fit the typeset equation. This is a problem because I really need the final web view to tightly hug the content.
Details:
My html page which is used to add new content to the page, hide/display the div, and manage the MJ queue is below:
<html>
<head>
<script src="MathJax.js" >
MathJax.Hub.Config({
messageStyle: "none",
extensions: ["tex2jax.js", "mml2jax.js"],
jax: ["input/TeX", "input/MathML", "output/SVG"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
imageFont:null
});
</script>
<script type="text/javascript">
function addTexMMLToNewParagraph(strText)
{
// Hide the page first
document.getElementById("hide_page").style.display = "none";
// Add new content as a child of the page div hide_page
var para = document.createElement("p");
var mytext = document.createTextNode(strText);
para.appendChild(mytext);
MathJax.Hub.Queue(function() {
document.getElementById("hide_page").appendChild(para);
});
// Queue up MathJax to typeset the page
MathJax.Hub.Queue(["Typeset", MathJax.Hub, 'hide_page']);
// Queue up a function to unhide the page div after the MathJax rendering is complete
MathJax.Hub.Queue(function() {
document.getElementById("hide_page").style.display = "";
});
}
</script>
</head>
<body id="main">
<div id="hide_page" style="display:none"></div>
</body>
</html>In a nutshell, the javascript function addTexMMLToNewParagraph(strText) is called from my C# code with the math I want to typeset. This function hides the div, adds the text as a new paragraph child of the div, queues up a typeset operation using the MJ queue, the uses the MJ queue again to queue up a function to show the div once typesetting is complete.
I have read that it is better to hide the div using visibility:hidden instead of display:none, but in practice I get even worse resizing problems when typesetting using that method, in particular the height resizes much worse.
My test case is to typeset the following Tex: $\dot{x} = x_1$. Console messages tell me that for each time I add this to the page, the height increases by 32 points. The width of the final equation should be 57 points, which I determine by fixing my container web view's size and just print out the incoming content size change notifications (using a KVO on the scroll view). In practice, however, when I allow my container view to resize according to the scroll view content size changes I see the following resizing using the display:none method for hiding the div until typeset completes:
2013-08-27 10:59:32.899 iOS_ScrollViewPager[4117:c07] Width = 1, Height = 1
2013-08-27 10:59:32.959 iOS_ScrollViewPager[4117:c07] INFO: Reveal server started.
2013-08-27 10:59:33.093 iOS_ScrollViewPager[4117:c07] Width = 1, Height = 8
2013-08-27 10:59:33.094 iOS_ScrollViewPager[4117:c07] Width = 1, Height = 8
2013-08-27 10:59:39.110 iOS_ScrollViewPager[4117:c07] Adding math: $\dot{x} = x_1$
2013-08-27 10:59:39.153 iOS_ScrollViewPager[4117:c07] Width = 488, Height = 8
2013-08-27 10:59:39.155 iOS_ScrollViewPager[4117:c07] Width = 488, Height = 8
2013-08-27 10:59:39.173 iOS_ScrollViewPager[4117:c07] Width = 488, Height = 40
2013-08-27 10:59:39.174 iOS_ScrollViewPager[4117:c07] Width = 488, Height = 40
Where as, if I fix my container view's width and height to say 1 and 1, I see the following content size changes (note: in this case I am not resizing the container, so the scroll view is able to resize its content larger and smaller):
2013-08-27 11:01:51.000 iOS_ScrollViewPager[4135:c07] Width = 1, Height = 1
2013-08-27 11:01:51.060 iOS_ScrollViewPager[4135:c07] INFO: Reveal server started.
2013-08-27 11:01:51.195 iOS_ScrollViewPager[4135:c07] Width = 1, Height = 8
2013-08-27 11:01:53.202 iOS_ScrollViewPager[4135:c07] Adding math: $\dot{x} = x_1$
2013-08-27 11:01:53.248 iOS_ScrollViewPager[4135:c07] Width = 488, Height = 8
2013-08-27 11:01:53.249 iOS_ScrollViewPager[4135:c07] Width = 1, Height = 8
2013-08-27 11:01:53.267 iOS_ScrollViewPager[4135:c07] Width = 57, Height = 40
So, even in this case, I see the height increase to 8 even before adding any math (I'm guessing to accommodate MJ message height), then the width jumps up to 488 (big problem!), and finally settles at 57 (the "correct" width). In this test since I have fixed my container's width and height I do get the scrolling web view, but it at least shows me what the final size should be once typesetting is complete. Note: each subsequent time I add the same math to the page the height increases by 32 and width remains the same.
What I have tried
I have been struggling for days trying to figure out how to get that width to stay down (less concerned about the additional 8 point height increase, but that would be nice to fix too). I have tried:
- using
visiblitiy = "hidden"instead ofdisplay = "none"(only makes height resizing worse) - playing around with the messageStyle and other MJ configuration parameters (does not seem to help)
- adding large delays between adding content, typsetting it, and then showing the div again (no difference, the width/height always jumps after queueing the typeset operation)
So to summarize, I have a final typeset equation that should have size 57x32 (w x h) but instead does something during typesetting that increases my page's size to 488x40 (w x h), even though everything is hidden and no messages are displayed. Everything else is working fine, its only this temporary resizing that is messing up my view's size.
Thanks in advance for any help :)
Peter Krautzberger
--
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.