# [SOLVED]Latex speed and fonts

#### Jameson

Staff member
[HR][/HR]

Hi everyone, if you would take a few minutes to test out a few Mathjax options it will help us gain more insight into optimal configuration options for using Mathjax on MHB.

1) Right-click on the following equation: $$\displaystyle \int_{0}^{\infty}e^{-x^2}dx$$

Find "Math Settings" then "Math Renderer". The 3 options you see here: HTML-CSS, SVG and MathML are the 3 settings I am asking you to test.

2) Open this thread, which contains a large amount of equations to render. It might take from 10-30 seconds to finish loading, but we aren't sure and that is what we want to know about.

*** END OF IMPORTANT PART ***
[HR][/HR]

1) Rendering initializing - I've been playing around today with some options for our Latex configuration. The main change I made was moving the typesetting (the actual rendering of equations) to the footer of each page instead of in the header. This means that the rest of the page will fully load before the rendering begins and I'm hoping that this will make our load times appear a little better. Please let me know if you notice anything.

2) Available fonts - There are 3 options you can choose from for the fonts that are used to render the equations on your computer locally. By default we use an option called "HTML-CSS", which is the slowest of the 3 but the most reliable and consistent. The other two choices are "SVD" and "MathML". You can read full descriptions of each choice here.

Here is what I found when trying the 3 fonts. I used this thread by MarkFL because it has a huge amount of equations to render and takes a while. MathML only worked on Firefox but it was very fast and the font looks nice. It's not available for many browsers though. SVD is the fastest option for Chrome but looks a bit weird and less crisp on my computer. HTML-CSS, our default option, takes almost twice as long as the others to run and sometimes I do notice bad looking outputs.

3) Future project - After hearing ZaidAlyafey's suggestion to have Latex render automatically as you write a post and taking a look around a lot of sites with Mathjax, I think this could be worth trying. It requires custom coding though and I don't think I can do it so we'll need help somehow. The main parts are a time loop that runs a function each time and being able pull/push basic information by DOM/element ID to and from an array.

Sadly, I can't do these things myself and reading through lots of code isn't helping me magically be a decent coder instantly So if you think you might be able to help with this then let me know.

That's all for now. Your feedback is greatly appreciated. Mathjax is awesome in most ways but there are still improvements to be made.

#### MarkFL

Staff member
Hey Jameson,

I experimented with Ackbach's thread http://mathhelpboards.com/calculus-10/differential-calculus-tutorial-1393.html because I have timed its load time in the past, and I find it loads about 1 second more slowly now. I don't know if this is statistically significant given the small number of data this is based on.

I use the STIX fonts, have 2GB RAM, use Windows 7 and Firefox 24.0.

Just now, I find:

I want to note as well that while the $\LaTeX$ is rendering, scrolling the page is sluggish just as it was before. I didn't know if this was an issue you were attempting to address with this change, so I figured it would be better to comment on it.

#### Jameson

Staff member
Thank you for the feedback!

I didn't expect the sluggish loading to stop but hope that for some it might make the site appear faster while loading. Javascript files stop parallel loading of files for a webpage I believe, so if placed in the middle of other stuff it can have a noticeable effect. However, I think that the sluggishness is from the script actually running as opposed to downloading.

Did you try out the other two fonts? I am using Chrome with SVG as the renderer and the link you shared loads in less than 10 seconds with no problems. With Firefox and MathML as the renderer, it's maybe 1-2 seconds slower than that but still way ahead of your times. Try changing the rendering option and hopefully you'll see similar results.

#### MarkFL

Staff member
How are the rendering options accessed?

edit 1: I found it, under Math Setting when right-clicking a $\LaTeX$ expression.

Changing the renderer to MAthML gives me a time, based on 5 runs, for the above page of 8.18 seconds!!!

Using the SVG option I get a time, based on 5 runs, of 15.38 seconds.

So, I will change to MathML, and let you know if there are any issues.

edit 2: I notice when using the SVG renderer, the $\LaTeX$ is not visible, but it is visible with the other two renderers.

edit 3: I actually like the default font better, and I noticed a cache error when I went back to the default renderer. I was able to clear it up by going back to MathML and then logging out to clear the cookies.

#### MarkFL

Staff member
This is what the font looks like for me using the default renderer:

When I switch to MathML, I get the following dialog box:

When I click OK, this is what the same $\LaTeX$ now looks like:

edit: I checked to see if my Java plugins were up to date, and they were not, so I updated them, but this made no change. I still get the dialog box, and the fonts look the same.

#### MarkFL

Staff member
Doing a bit of research on the MathML renderer, I found the following at Wikipedia:

Web browsers

Of the major web browsers, Gecko based browsers (e.g., Firefox and Camino) have the most complete native support for MathML.[6][7]

While the WebKit layout engine has a development version of MathML,[8] this feature is only available in version 5.1 and higher of Safari,[9] Chrome 24[10][11] but not in later versions of Chrome.[12]
Opera, between version 9.5 and 12, supports MathML for CSS profile,[13][14] but is unable to position diacritical marks properly.[15] Prior to version 9.5 it required User JavaScript or custom stylesheets to emulate MathML support.[16] Starting with Opera 14, Opera drops support for MathML by switching to the Chromium 25 engine.[17]
Internet Explorer does not support MathML natively. Support in IE7, IE8 and IE9 can be added by installing the MathPlayer plugin.[18]
The KHTML-based Konqueror currently does not provide support for MathML.[19]
The quality of rendering of MathML in a browser depends on the installed fonts. The STIX Fonts project have released a comprehensive set of mathematical fonts under an open license. The Cambria Math font supplied with Microsoft Windows had a slightly more limited support.[20]

Here is a page that will let you quickly see what the different renderers look like:

MathJax | MathML Samples

Here is a summary of browser support for MathML:

https://vismor.com/documents/site_implementation/viewing_mathematics/S1.SS2.php

I tried installing more fonts, but so far I could see no change.

#### Jameson

Staff member
I think the important result of this is that for both Firefox and Chrome there is another option which renders much faster than usual.

For me (and running Mac OS X 10.7.5) the MathML font in Firefox looks great, much better than what I'm used to it seems. Here's an example.

The image you posted of the area and volume integrals looks much worse than what I'm used to. It seems that the difference of HTML-CSS rendering is much larger than I thought. The lines are thinner than on my computer and it seems a slight bit blurry, like a GIF output of Latex rather than a scaleable, vector based font rendering like Mathjax should use. Maybe it's the picture, but below is a bit of your output you posed compared to mine for HTML-CSS:

#### Jester

##### Well-known member
MHB Math Helper
How do I find the times to render?

#### Jameson

Staff member
How do I find the times to render?
Good question, sorry! The easiest way is just to count yourself. Take a look at the bottom left corner of the page when it's loading and you'll see a Mathjax progress bar in grey. It first goes through "Processing" then "Typesetting". When the bar disappears it's done.

Since the difference between the options is probably very big, counting without an exact timer is fine.

#### MarkFL

Staff member
How do I find the times to render?
I used the stopwatch function on my cellphone.

#### zzephod

##### Well-known member
I used the stopwatch function on my cellphone.
Chrome (v30): 18s, na, 6s

FireFox (v24): 14s, 5s*, na (indicates a warning that may not render correctly but looks OK any way)

Opera (v12.16): 13s, 4s*, 8s (the * indicates an unsuitable font)

(W7-64bit home prem, Athlon II x4 630 processor, 2.8 GHz, 4 GB ram, Timings based on counting under my breath one and, two and etc. )

Last edited:

#### Bacterius

##### Well-known member
MHB Math Helper
[JUSTIFY]I cleared my browser cache before each trial. Reported timings may include latency to MHB and various CDN's, as well as any caching I failed to account for. Results were obtained using an advanced military-grade atomic clock my phone's stopwatch.

System configuration:
- Windows 7 (64-bit)
- 4GB RAM

HTML-CSS: 10.79 seconds
MathML: 1.45 seconds
SVG: 6.98 seconds

I should note that the MathML renderer doesn't display properly for me, so that timing should probably be ignored.[/JUSTIFY]

Last edited:

#### MarkFL

Staff member
I made some OS and browser updates, and so I thought I would do some more runs to give more data.

System configuration:
• Windows 7 Home Premium (64 bit)
• Dual-core CPU (2.7 GHz)
• 2 GB RAM

All times are base on 5 runs.

 Math Renderer Internet Explorer 10.0.9200.16721 Mozilla Firefox 24.0 Issues HTML-CSS 31.85 s 25.98 s None. MathML 10.84 s 7.90 s IE - Requires MathPlayer Plugin, which does not work with this version of IE. $\LaTeX$ displays as plain text. Firefox - All features not implemented. Font looks bad. SVG 29.17 s 14.02 s IE - Bold font, intermittent display of rendering progress. Firefox - $\LaTeX$ does not display.

#### Sudharaka

##### Well-known member
MHB Math Helper
Hi Jameson,

I use a computer with the following configurations,

For the browser, I use Safari (Version 6.0.5 (8536.30.1)).

For MathML it gives the following warning prior to changing.

Your browser's native MathML does not implement all the features used by MathJax, so some expressions may not render properly.

Switch the renderer anyway?

(Press OK to switch, CANCEL to continue with the current renderer)
Time taken for the change is insignificant for MathML and SVG; it happens so instantly (maybe one second). But both of these aren't supported by Safari (I guess) and in SVG mode I can only see dashes in place of equations. Using MathML I get kinda ugly looking equations (small and looks very out of place compared to HTML-CSS). When I switch from MathML or SVG back to HTML-CSS it takes abut 10-11 seconds for the change.

#### awkward

##### Member
My times (approximate):

 HTML-CSS 10 sec MathML not supported by my browser (Chrome) SVG 20 sec

#### Opalg

##### MHB Oldtimer
Staff member
[iMac 10.6.8, 2.66 GHz, 2GB memory, Safari 5.1.10]

 HTML-CSS 23 sec MathML 5 sec SVG 8 sec
MathML rendering quality is completely unacceptable. The only fault I could see with SVG is that with a narrow browser width it fails the wraparound test. Long LaTeX expressions get clipped rather than wrapped. Overall, I prefer to stick with HTML-CSS. I have never been bothered by its rendering times.

#### afwings

##### New member
HTML/CSS: 21 seconds
MathML: 8 seconds
SVG: 14 seconds, but the equations did not display

Using Firefox 24.0 for Windows. Also have AdBlockPlus installed, which may have interfered with the SVG; I don't know.