Tutorial – how to port MathJax to Windows 8 store applications

By Shiv Shankar,

In this tutorial, I will explain how to display math equations in Windows 8 store applications using MathJax.  MathJax is an open source JavaScript display engine for mathematics that works in all modern browsers. MathJax enables your web site or application show mathematics equations.

The scope of this tutorial is limited to Windows 8 store applications written in HTML/CSS/Javascript.

I’ll cover the following topics in detail in the following sections:

  1. How to setup your development environment?
  2. How to make MathJax work in IE10 and Windows 8 app?
  3. How to reduce the size of the MathJax to a smaller size by removing unnecessary files?
  4. How to configure to ensure MathJax works properly?
  5. How to render math content runtime?
  6. How to prepare and publish a Windows 8 app that has math content?

1. How to setup your development environment?

I have used the following development environment and recommend the following setup:

  1. Mac with Parallels 8 Desktop.
  2. Windows 8 Enterprise Evaluation Edition (valid for 90 days).
  3. Visual Studio Express 2012 for Windows 8.
  4. MathJax 2.1 beta or above.

We are also going to use some unix specific tool like iconv. If you don’t have access to unix like machines you may want to setup GNU tools in your Windows machine.

2. How to make MathJax work for IE10 and Windows 8 app?

The Windows 8 application written in javascript runs in the embedded version of IE10 in Windows. Our first step is to ensure that we have a version of MathJax that runs properly in the IE10 browser. At the time of this writing, MathJax 2.1 beta is available that works in IE10.  As a first step, from your Windows IE10 visit

http://www.mathjax.org

to check whether the math equations are displayed correctly.

Download the latest version of MathJax in a separate folder outside the Visual Studio project. Do not try to adding the whole MathJax to Visual Studio; this will make Visual Studio hang!

We will be using the unpacked version of the MathJax stored in the unpacked directory.

Windows apps are not allowed access to window.clipboardData and will get a runtime error: "access denied". We are going to fix this problem first.

Edit the file Mathjax.js in the unpacked directory.

Replace the following line the near line #2332:

isMSIE: (window.ActiveXObject != null && window.clipboardData != null)

with:

 isMSIE: (window.ActiveXObject != null )

3. How reduce the size of the MathJax to a smaller size by removing files?

MathJax has around 30,000 files and occupies around 30MB disk space. It is essential to reduce the size and the number of files. The core strategy is remove the fonts that are not used by IE10. Further optimizations can be done by deleting unused files in the output directory.

Through some trial and errors, I kept only the following files and directories.

MathJax-2.1/images/*
MathJax-2.1/fonts/HTML-CSS/TeX/woff/*
MathJax-2.1/unpacked
   MathJax-2.1/unpacked/MathJax.js
   MathJax-2.1/unpacked/config/default.js 
   MathJax-2.1/unpacked/extensions/*
   MathJax-2.1/unpacked/jax/element/mml/*
   MathJax-2.1/unpacked/jax/input/*
   MathJax-2.1/unpacked/jax/output/HTML-CSS/*

Total size: 3.5MB

Further optimizations are possible.

Once you have done the optimizations, copy the above folders/files to your Visual Studio project and add the top level folder (MathJax-2.1) to the solution.

4. How to configure to ensure MathJax works properly?

Standard configurations work without any issues. Typically in an app environment math content is fetched using AJAX and are displayed dynamically.

<script src="plugins/MathJax-2.1/unpacked/MathJax.js?config=default">
</script>

Note: You need to include all the required files in Visual Studio. You can not dynamically include scripts from an external web-site.

5. How to render Math content runtime?

Once you receive the AJAX response, you dynamically populate HTML content and call the processMath function:

<div id="mymathcontent">
     LaTeX: 
     <span class="dynamic_content">
       $$J_\alpha(x) = \sum\limits_{m=0}^\infty \frac{(-1)^m}{m! \,
       \Gamma(m + \alpha + 1)}
       {\left({\frac{x}{2}}\right)}^{2 m + \alpha}$$
     </span>
</div>

window.processMath = function (id) {
  MathJax.Hub.Queue(["Typeset", MathJax.Hub, 
                      document.getElementById(id)]);
};

processMath("mymathcontent");

6. How to prepare and publish the app that has math content?

You need to convert MathJax javascript files to UTF8 encoding with BOM (Byte Order Marking). Otherwise the Windows self certification test will fail and your app submission will be rejected.

We need couple of scripts to do the conversion.

PHP script outputbom.php creates the BOM header.

<?php

  echo chr(239) . chr(187) . chr(191);

?>

C-shell toutf8.csh script converts a javascript file to UTF8 encoding with BOM header.

#!/bin/csh
echo Converting $1
mv $1 $1.orig
php ~/tools/outputbom.php >  $1
iconv -t UTF8 $1.orig >> $1

Store both theses files under tools directory under your home directory.

The following find command does the bulk conversion.

%  find unpacked   -name "*.js" -exec ~/tools/toutf8.csh {} \;

You can test whether the conversion works by building the app, running the app, and running the Windows self certification test.

Delete the .orig files after the tests.

Closing

I hope you enjoyed the tutorial. Please send your questions or feedback to shiv@learnhive.net.

Acknowledgements

Thanks to Davide Cervone and  Peter Krautzberger for their feedback and corrections.

This entry was posted in learning and tagged , , by Shiv Shankar. Bookmark the permalink.

About Shiv Shankar

Shiv is a founder and the CEO of LearnHive. He cofounded Learnhive committed to creating a unique knowledge ecosystem which will make it easy to create, organize, share and obtain learning materials for K-12 education. He has over 20 years of experience in setting up and managing world-class software product development centers. Most recently, he was the Director of Enterprise Software Technology in Intel. He has a Masters degree in Mechanical Engineering from IIT, Madras, India. He considers teaching his passion and has won several best teacher and mentor recognitions. He is an avid technologist, voracious reader and music composer.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

205,818 Spam Comments Blocked so far by Spam Free Wordpress

Register for free with Learnhive to receive a quick reply from the author
HTML tags are not allowed