Welcome to our community

Be a part of something great, join today!

[SOLVED] Latex speed and fonts

  • Thread starter
  • Admin
  • #1

Jameson

Administrator
Staff member
Jan 26, 2012
4,052
[HR][/HR]
*** IMPORTANT PART, PLEASE READ ***

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.

3) Using all 3 "Math Renderer" settings (if allowed by your browser), please load this thread 3 times and post the loading times in this thread.

*** 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

Administrator
Staff member
Feb 24, 2012
13,775
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. :D

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

Prior to today, the thread mentioned above had a load time of:

Loading time average (based on 5 runs): 28.05 seconds

Just now, I find:

Loading time average (based on 5 runs): 29.29 seconds

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.
 
  • Thread starter
  • Admin
  • #3

Jameson

Administrator
Staff member
Jan 26, 2012
4,052
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

Administrator
Staff member
Feb 24, 2012
13,775
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!!! (Yes)

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. :D

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

Administrator
Staff member
Feb 24, 2012
13,775
This is what the font looks like for me using the default renderer:

renderer1.jpg

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

renderer2.jpg

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

renderer3.jpg

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. :D
 

MarkFL

Administrator
Staff member
Feb 24, 2012
13,775
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. :D
 
  • Thread starter
  • Admin
  • #7

Jameson

Administrator
Staff member
Jan 26, 2012
4,052
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.

Screen Shot 2013-10-26 at 8.16.50 AM.png

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:

Screen Shot 2013-10-26 at 8.31.52 AM.png Screen Shot 2013-10-26 at 8.34.07 AM.png
 

Jester

Well-known member
MHB Math Helper
Jan 26, 2012
183
How do I find the times to render?
 
  • Thread starter
  • Admin
  • #9

Jameson

Administrator
Staff member
Jan 26, 2012
4,052
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

Administrator
Staff member
Feb 24, 2012
13,775

zzephod

Well-known member
Feb 3, 2013
134
I used the stopwatch function on my cellphone. :D
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
Jan 26, 2012
644
[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:
- Google Chrome 64-bit
- Windows 7 (64-bit)
- Quad-core CPU (3.7GHz)
- 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

Administrator
Staff member
Feb 24, 2012
13,775
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 RendererInternet Explorer 10.0.9200.16721Mozilla Firefox 24.0Issues
HTML-CSS31.85 s25.98 sNone.
MathML10.84 s7.90 sIE - 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.
SVG29.17 s14.02 sIE - Bold font, intermittent display of rendering progress.
Firefox - $\LaTeX$ does not display.
 

Sudharaka

Well-known member
MHB Math Helper
Feb 5, 2012
1,621
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
Feb 18, 2012
36
My times (approximate):

HTML-CSS10 sec
MathMLnot supported by my browser (Chrome)
SVG20 sec
 

Opalg

MHB Oldtimer
Staff member
Feb 7, 2012
2,725
[iMac 10.6.8, 2.66 GHz, 2GB memory, Safari 5.1.10]

HTML-CSS23 sec
MathML5 sec
SVG8 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
Mar 7, 2012
9
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.
 

MarkFL

Administrator
Staff member
Feb 24, 2012
13,775
I wish to thank everyone who has so far taken the time to post their data, and I want to encourage those who have not <cough>particular if you are staff<cough> to do so soon. (Angel)
 

Jameson

Administrator
Staff member
Jan 26, 2012
4,052
Thank you to everyone who tested out the 3 options and reported back the results. It seems that changing from the default HTML-CSS is not a good idea for everyone due to problems with rendering quality, but one of the other two methods might be better for some.

Last month I spent a good amount of time reading Mathjax documentation and message boards and in the end concluded that we can't significantly decrease rendering times right now. An idea for a future project is to use javascript to render only the LaTeX commands that are visible in the user's current browser window to help with the tendency for a page to freeze up while rendering a large amount of LaTeX at once. It would work when reading the beginning of a thread or jumping to the last post - what you see should render first.

This is definitely doable but we don't have a JS coder around to work on it so the idea will have to wait. Going to mark this thread as [SOLVED] for now but please post any comments or ideas you get.