After a few tests, I was able to get a few weird Math formulas display working in a UIWebView using MathJax as shown in screen dump below.
The codes are based on examples from This page on MathJax site, I stripped out the CSS/JS files and converted into a long NSString as below. Then based on parameter passed on from the caller, concatenated into a long string, write it into a temp HTML file.
NSString *foo = @"<html><head><meta name='viewport' content='initial-scale=1.0' />"
"<script type='text/javascript' src='http://www.mathjax.org/wp-includes/js/l10n.js?ver=20101110'></script>"
"<script type='text/javascript' src='http://www.mathjax.org/wp-content/plugins/syntax-highlighter-mt/scripts/shCore.js'></script>"
"<script type='text/javascript' src='http://www.mathjax.org/wp-content/plugins/syntax-highlighter-mt/scripts/shAutoloader.js'></script>"
"<link type='text/css' rel='stylesheet' href='http://www.mathjax.org/wp-content/plugins/syntax-highlighter-mt/styles/shCore.css'/>"
"<link type='text/css' rel='stylesheet' href='http://www.mathjax.org/wp-content/plugins/syntax-highlighter-mt/styles/shThemeDefault.css'/>"
"<style type='text/css'>body { background-color: #d2d3d3; }</style>"
"<script type='text/x-mathjax-config'>"
"MathJax.Hub.Config({ MMLorHTML: { prefer: {Firefox: \"HTML\"} } });"
"</script>"
"<script type='text/javascript' src='http://cdn.mathjax.org/mathjax/1.1-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full'></script>"
"</head>"
"<body>";
NSString *foo2 = [foo stringByAppendingString:strContent];
NSString *foo3 = [foo2 stringByAppendingString:@"</body></html>"];
Then in the main file, it's loaded into an UIWebView, with the content (also extracted from same test page).
NSString *fName = @"test1.html";
//copied from http://www.mathjax.org/demos/tex-samples/
NSString *xContent = @"<p>\\["
"\\left( \\sum_{k=1}^n a_k b_k \\right)^{\\!\\!2} \\leq"
"\\left( \\sum_{k=1}^n a_k^2 \\right) \\left( \\sum_{k=1}^n b_k^2 \\right)"
"\\]</p>"
"<BR/>"
"<p>\\["
"\\frac{1}{(\\sqrt{\\phi \\sqrt{5}}-\\phi) e^{\\frac25 \\pi}} ="
"1+\\frac{e^{-2\\pi}} {1+\\frac{e^{-4\\pi}} {1+\\frac{e^{-6\\pi}}"
"|{1+\\frac{e^{-8\\pi}} {1+\\ldots} } } }"
"\\]</p>";
//write to temp file first
[self writeStringToFile:tempDir fileName:fName content:xContent];
//create UIWebView
CGRect webRect = CGRectMake(10,10,300,400);
myWebView =[[UIWebView alloc] initWithFrame:webRect];
myWebView.scalesPageToFit = YES;
myWebView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
myWebView.delegate = self;
NSString *path4 = [tempDir stringByAppendingPathComponent:fName];
NSURL* url = [NSURL fileURLWithPath:path4];
NSURLRequest* req = [[NSURLRequest alloc] initWithURL:url];
[myWebView loadRequest:req];
[self.view addSubview:myWebView];
[req release];
activityIndicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
activityIndicator.frame = CGRectMake(0.0, 0.0, 40.0, 40.0);
activityIndicator.center = self.view.center;
[self.view addSubview: activityIndicator];
Unfortunately, I don't know how to include the whole MathJax into the project yet (the size is 16MB even after compressed into .ZIP file!!!), so although the HTML is first written to local temp directory then loaded back, it still has to go out through Internet to load those .JS files - which might not be the best solution for "off-line" mode operation I guess.
The source project is available below. Note that for the content you have to change every "\" into "\\" otherwise it won't work as that's the escape character.
Source for UIWebViewTest
[Update 1] After tested from local directory, found that to have the whole MathJax fully functioning, you need:
(1) the main "MathJax.js" file, plus
(2) all the files under the 4 sub-directories: "config", "extensions", "fonts" and "jax".
Just that "fonts" one by itself is more than 10MB in size!
Definitely much easier to get everything from Internet then...
[Update 2] Further test shows that as below, the "*foo" can be even further simplified by removing some of the settings in the middle (about 9 lines) and it still works ok (Note: only tested in Safari 5.0.5).
NSString *foo = @"<html><head><meta name='viewport' content='initial-scale=1.0' />"
"<script type='text/javascript' src='http://cdn.mathjax.org/mathjax/1.1-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML-full'></script>"
"</head>"
"<body>";
[Update 3] In case you wonder what does the following META tag mean, I will cover that in a separate post.
"<meta name='viewport' content='initial-scale=1.0' />"
[Update 3] In case you wonder what does the following META tag mean, I will cover that in a separate post.
"<meta name='viewport' content='initial-scale=1.0' />"
[Update 4 (26/02/2012)] Please have a look at this new post about how to setup MathJax "Locally".
0 comments:
Post a Comment