Math-in-HTML Examples

How to add
high-quality, scalable
math formulas to web pages.

$$\pi/4 = 1-1/3+1/5-1/7+1/9-1/11+\cdots$$ $$x(t)=\sum_{k=0}^{\infty}a_k \cos(2\pi kt/T)+b_k \sin(2\pi kt/T)$$

Home Page > RefInfo Menu Page >

ComputerInfo Menu Page >

Web Development section >

This Math-in-HTML Examples page

! Note !
More MathJax info and examples may be added,
if/when I re-visit this page.

INTRODUCTION :

For anyone who wants to present math formulas via a web page, a description of and examples of MathJax (a math markup language) would probably be of interest.

    (MathJax actually offers a choice from, or a mixture of, several different languages.)

You could try MathML (Math Markup Language), but you can see by the examples on the MathML Wikipedia page that even a simple expression like pi-r-squared requires many lines (or characters) of an XML-like language.


Some MathJax features :

At the www.mathjax.org site, you can see that many organizations have adopted MathJax as their way of showing math formulas --- organizations such as the AMS (American Mathematical Society) and Wikipedia.

And on the News page of that site, you can see that more and more organizations, over the years, have decided to use MathJax.

Using the MathJax facility, to put mathematics in your web page, you can use

  • TeX and LaTeX notation, or

  • MathML notation, or

  • AsciiMath notation, or

  • a combination of all three within the same page.

MathJax will produce output in MathML form if the user's browser supports that sufficiently, and will use HTML-with-CSS to render the mathematics otherwise.

    Actually, my old Seamonkey 2.10 web browser, released around 2012, will render MathML. But MathJax (circa 2015) does not think that my browser has that capability. MathJax briefly shows a formula rendered in scalable fonts, but then quickly replaces that rendering with a bitmapped image.

    For example the series for pi-over-four at the top of this page, in my Seamonkey 2.10 web browser, renders briefly in a nice scalable font --- but, in a fraction of a second, the nice rendering is replaced by a coarser bitmap image.

    So MathJax is not infallible in detecting whether your browser will support scalable fonts.

    (It turns out that MathJax behaves differently depending on whether I am testing an installation on my local desktop machine or whether I am running the installation on a remote web server. The remote installation renders the math expressions in a scalable font, without then replacing that nice rendering with a coarser, bitmapped rendering.)

If a user is using a modern web browser (released approximately post-2012), MathJax will probably use CSS with 'web fonts' ( TrueType scalable fonts? ) or SVG, instead of bitmap images or Flash, so equations scale 'nicely' (that is, no 'jaggies'), with surrounding text, at all zoom levels.

    If a user has an older web browser, MathJax will probably render the formulas with bitmap images --- which are not scalable-without-jaggies and do not have the high-resolution of scalable fonts. (Each symbol is rendered as a separate image, which can be saved to a PNG file, by using 'right-click' and 'SaveAs'.)

Even if one does not want to present a formula in a web page, but, instead, one wants to put the formula in an image file, it can be helpful to use MathJax to create the formula and display the expression in a web browser --- because then one can use a screen/window-capture utility to capture the entire rendered formula (or multiple formulas) in a single image file.


Note that MathJax is a user-friendly 'front end' for MathML. MathJax allows the user to specify one-line of code for a math expression. That one line is converted to many lines of MathML code.

People who are well-versed in writing their math expressions in the TeX format can use that same code format in web pages. MathJax will convert the TeX code to MathML code.

In fact, you can right-click on a rendered expression and a little menu will popup that allows you to show the MathML code that is being used to do the rendering.

    Actually, in my Seamonkey 2.10 web browser, I have to right-click (and get a typical browser 'SaveAs' menu) and then left-click to see the 'Show Math As' menu. I can show the expression as MathML commands --- and as TeX commands, if the expression was written in Tex.

    Note that you could use this facility to replace Tex commands in a web page by the 'wordier' MathML. This might be helpful if you wanted to make web pages that did not require a MathJax installation. In other words, you could use MathJax to make MathJax-independent math web pages.


Some Math-in-HTML examples on this page :

This page is intended to present some MathJax examples --- to show the MathJax code that can be used to show special symbols such as

  • the summation symbol, capital sigma
  • symbols for special numbers, such as pi
  • the integration symbol
  • partial derivative symbols
  • superscripts and subscripts
  • square root signs
  • etc. etc.

Some examples of math expressions involving these symbols are shown below.

We can do a web search on keywords such as mathjax samples to find more examples.


Implementing MathJax for a web site :

The Getting Started Documentation page at www.mathjax.org provides multiple ways of implementing MathJax in your web pages.

You can use a remote-access method of calling on MathJax functions at a remote web site, but I find this quite odious, for several reasons:

  • If the remote web site (cdn.mathjax.org) goes down, the math in the web pages using MathJax will not be rendered.

  • If the remote web site is experiencing performance problems (say, it is overloaded with requests), the web pages using MathJax will be rendered slowly.

  • If the software on the remote web site is changed (say, a new release or some software architecture changes or a buggy update), the math in the web pages using MathJax may not be rendered as intended.

  • If the remote web site (cdn.mathjax.org) is changed to a new web site name, every web page referencing that web site name will have to be changed. (You may not hear of this change until months later. In the meantime, your MathJax pages are not being rendered properly.)

  • And there are probably some other 'broken-rendering' scenarios that I have not covered here. (I see a lot of 'Unknown property' and 'Error in parsing' messages, followed by 'Declaration dropped.', in the 'Error Console' of my Seamonkey 2.10 web browser --- errors apparently coming from the MathJax Javascripts. That does not give me a lot of confidence in the reliability of the MathJax code --- in this release or in future releases.)

Although the 'local install' of MathJax (in 2015) occupied about 60 Megabytes (a grossly large amount of disk space) for more than 30,000 files (takes about half an hour to upload the files to your web site as individual files), I prefer installing the MathJax 'math-typesetting library' among the web pages that are going to use MathJax --- so that those web pages can call on the 'MathJax.js' Javascript locally, rather than over the Internet.

    About half of the 60 Megabytes is in about 25,000 '.png' small-image files, which are about 100 to 300 bytes in size. Most of the other half of the 60 Megabytes is in '.js' Javascript files, which are about 100 to 100,000 bytes in size.

    You can probably make the install go much faster by uploading the single, 60Meg 'MathJax-master.zip' file to your web site --- and then un-zipping the intall file on the web server. The single file uploads in about a minute, whereas the 30,000 files take more than half an hour to upload.

In fact, I have installed MathJax on this web site, and the examples below are being rendered because I put the code


<script type="text/javascript" src="/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

in the 'head' section of this web page.

You may have to adjust the directory location of 'MathJax.js' to be compatible with your web site structure.


Some MathJax (and MathML) Examples :

From the Wikipedia page on MathML, the code :


<h4>Example of MathML embedded in an HTML5 file : </h4>

   <p>
     The area of a circle is 
     <math>
       <mi>&pi;</mi>
       <mo>&InvisibleTimes;</mo>
       <msup>
         <mi>r</mi>
         <mn>2</mn>
       </msup>
     </math>.
   </p>

is rendered as :


Example of MathML embedded in an HTML5 file :

The area of a circle is π r 2 .


You can see from this that MathML is quite 'wordy' --- although it usually does not require the installation (or remote access to) a large group of files. The MathML interpreter is built into most modern (post-2011) web browsers.

On the other hand, the following MathJax examples use a more compact notation --- so that a one-line math formula can usually be coded using one line of MathJax syntax.


A MathJax TeX example :

The TeX-like code :


<p>
When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\)
and they are
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
</p>

renders as :


When \(a \ne 0\), there are two solutions to \(ax^2 + bx + c = 0\) and they are $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$


A few MathJax examples from an AMS web page :

In the 2015 April ams.org web page www.ams.org/news/math-in-the-media/04-2015-media, we can see MathJax examples like the following (by looking at the web page source HTML).


The string

$$\pi$$

causes a greek letter pi to be shown ... centered like this $$\pi$$


The line

$$\pi/4 = 1-1/3+1/5-1/7+1/9-1/11+\cdots$$

displays a representation of the infinite series that connects all odd numbers to pi, namely $$\pi/4 = 1-1/3+1/5-1/7+1/9-1/11+\cdots$$


The line

$$x(t)=\sum_{k=0}^{\infty}a_k \cos(2\pi kt/T)+b_k \sin(2\pi kt/T)$$ 

presents the equation for a Fourier series of the function x(t): $$x(t)=\sum_{k=0}^{\infty}a_k \cos(2\pi kt/T)+b_k \sin(2\pi kt/T)$$


More examples

It is my intent that the discussion and examples above will help people (relatively) quickly understand how to render math formulas in web pages.

There are more examples in about 20 '.html' files in the 'test' directory of the MathJax installation.

To find more MathJax or MathML examples, you can do WEB SEARCHES on keywords such as:

You can find examples involving calculus symbols for integration and differentiation.

Bottom of this
Math-in-HTML Examples page.

To return to a previously visited web page, click on the Back button of your web browser a sufficient number of times. OR, use the History-list option of your web browser.
OR ...

< Go to Top of Page, above. >

< Go to Introduction, above. >

< Go to Start of Examples, above. >

Page was created 2015 May 17.

Page was changed 2018 Dec 18.
(Added css and javascript to try to handle text-size for smartphones, esp. in portrait orientation.)