In this article I am going to show you a method to integrate MathJax - an external javascript display engine for mathematics - in an iOS app. I used the following components:
| Component | Version |
|---|---|
| XCode | Version 7.2.1 (7C1002) |
| iOS | 9.2 |
| MathJax | 2.6.1 |
Prerequisite
I wanted to display mathematical equations inside an iOS app using existing math render packages. According to this Stack overflow answer, mathML is supported by UIWebView since iOS 5. The downside of this solution, is that you have to use another packages to convert a convenient math equation reprsentation (like LaTEX) to mahtML which is very unconvenient:
<math title="2^(2/(sqrt(6))" xmlns="http://www.w3.org/1998/Math/MathML">
<mstyle mathcolor="blue" fontfamily="sanserif" displaystyle="true">
<msup>
<mn>2</mn>
<mrow>
<mfrac>
<mn>2</mn>
<mrow>
<msqrt>
<mrow>
<mn>6</mn>
</mrow>
</msqrt>
</mrow>
</mfrac>
</mrow>
</msup>
</mstyle>
</math>
The equivalent LaTEX representation is:
2^{\frac{2}{\sqrt{6}}}
To be able to use LaTEX, a third party engine is needed to produce renderable html from it. I chose MathJax for this purpose.
Downloading MathJax
Download the sources from MathJax’s Github page. At the time I wrote this article, the latest version was 2.6.1. It could take quite a bit of time to download the whole zip file.
I put the downloaded files into the Xcode project’s Vendor folder:
Simply unboxed the zip, the package takes up 180 MB space (that’s a lot!). In a future article I will show you the minimal needed content of this package that is be able to render the expressions.
Adding the MathJax package to the project
I added the downloaded and extracted MathJax sources to a single view based Xcode project, by dragging the folder into the project navigator. I unchecked the copy sources option.
Using the MathJax package
After the sources are placed to the right place, it’s time to use them. I draged a UIWebView to the Storyboard, and created a connection to the ViewController class (@IBOutlet weak var myWebView: UIWebView!). I wanted to display the following simple html page in the UIWebView…
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/javascript" async
src="MathJax-2.6.1/MathJax.js?config=TeX-AMS_CHTML">
</script>
</head>
<body>
<div style="font-size: 30pt; color: #eee;">
$$
\begin{equation}
\prod_{\substack{
1\le i \le n\\
1\le j \le m}}
M_{i,j}
\end{equation}
$$
</div>
</body>
</html>
… so I used its loadHTMLString method to do that:
//
// ViewController.swift
// MathJaxTest01
//
// Created by Tibor Simon on 20/02/16.
// Copyright © 2016 Tibor Simon. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var myWebView: UIWebView!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
let path = NSBundle.mainBundle().bundlePath
let baseURL = NSURL.fileURLWithPath(path)
let myHTML = "<!DOCTYPE html><html><head><title>MathJax TeX Test Page</title><script type=\"text/javascript\" async src=\"MathJax-2.6.1/MathJax.js?config=TeX-AMS_CHTML\"></script></head><body> <div style=\"font-size: 30pt; color: #eee;\">$$\\begin{equation}\\prod_{\\substack{1\\le i \\le n\\\\ 1\\le j \\le m}}M_{i,j} \\end{equation}$$</div></body></html>"
myWebView.loadHTMLString(myHTML, baseURL:baseURL)
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
Testing with the simulator
The project loads up to the simulator a bit slowly. After it loads, it renders the mathematical expression to the UIWebView in 8 phases:
The whole rendering happens in less then half a second, but it is noticeable. If you want to use this method to render mathematical expresions in your app, you have to make sure, you only show your UIWebView, when it fulli loaded.
Try it out yourself!
You can download the whole Xcode project with the added MathJax sources from the project’s Github repository.
Acknowledgement
For this project, I get a lot of ideas from New 2 Objective-C blog. His implementation is based on a local file writing and reading, which is pretty slow, but it works :)
I also used some ideas from Stack Overflow to make my UIWebView transparent
