How to write mathematical formulas in HTML?

Some simple mathematical formulas can be written using HTML tags, such as formula 1:

$\left( x^{2}+y^{2}-1\right) ^{3}-x^{2}y^{3}=0$

Using the ^{tag of HTML:}

(x<sup>2</sup> + y<sup>2</sup>1)<sup>3</sup> - x<sup>2</sup>y<sup>3</sup> = 0
Copy the code

But HTML can’t handle more complex formulas, like this one:

$f\left( t\right) =\lim _{n\rightarrow \infty }\dfrac{n! n^{t}}{t\left( t+1\right) \ldots \left( t+n\right) }=\dfrac{1}{t}\prod ^{\infty }_{n=1}\dfrac{\left( 1+\dfrac{1}{n}\right) ^{t}}{1+\dfrac{t}{n}}=\dfrac{e^{-rt}}{t}\prod ^{\infty }_{n=1}\left( 1+\dfrac{t}{n}\right) ^{-1}e^{\dfrac{t}{n}}$

We can use MathML to describe complex mathematical formulas like this.

Mathematical Markup Language (MathML) is an XML-based standard for describing Mathematical symbols and formulas. Its goal is to integrate mathematical formulas into the World Wide Web and other documents. Since 2015, MathML has become part of HTML5 and an ISO standard. —- Wikipedia

Formula 2 is described in MathML like this:

<math>
  <mi> f </mi>
  <mrow>
    <mo> ( </mo>
    <mi> t </mi>
    <mo> ) </mo>
  </mrow>
  <mo> = </mo>
  <munder>
    <mrow>
      <mi> lim </mi>
    </mrow>
    <mrow>
      <mi> n </mi>
      <mo> &#x2192;
        <! -- rightwards arrow -->
      </mo>
      <mi> &#x221E;
        <! -- infinity -->
      </mi>
    </mrow>
  </munder>
  <mfrac>
    <mrow>
      <mi> n </mi>
      <mo> ! </mo>
      <msup>
        <mrow>
          <mi> n
            <! -- greek capital letter lambda -->
          </mi>
        </mrow>
        <mrow>
          <mi> t </mi>
        </mrow>
      </msup>
    </mrow>
    <mrow>
      <mi> t </mi>
      <mrow>
        <mo> ( </mo>
        <mi> t </mi>
        <mo> + </mo>
        <mn> 1 </mn>
        <mo> ) </mo>
      </mrow>
      <mo> &#x2026;
        <! -- horizontal ellipsis -->
      </mo>
      <mrow>
        <mo> ( </mo>
        <mi> t </mi>
        <mo> + </mo>
        <mi> n </mi>
        <mo> ) </mo>
      </mrow>
    </mrow>
  </mfrac>
  <mo> = </mo>
  <mfrac>
    <mrow>
      <mn> 1 </mn>
    </mrow>
    <mrow>
      <mi> t </mi>
    </mrow>
  </mfrac>
  <munderover>
    <mrow>
      <mo> &#x220F;
        <! -- n-ary product -->
      </mo>
    </mrow>
    <mrow>
      <mi> n </mi>
      <mo> = </mo>
      <mn> 1 </mn>
    </mrow>
    <mrow>
      <mi> &#x221E;
        <! -- infinity -->
      </mi>
    </mrow>
  </munderover>
  <mfrac>
    <mrow>
      <msup>
        <mrow>
          <mrow>
            <mo> ( </mo>
            <mn> 1 </mn>
            <mo> + </mo>
            <mfrac>
              <mrow>
                <mn> 1 </mn>
              </mrow>
              <mrow>
                <mi> n </mi>
              </mrow>
            </mfrac>
            <mo> ) </mo>
          </mrow>
        </mrow>
        <mrow>
          <mi> t </mi>
        </mrow>
      </msup>
    </mrow>
    <mrow>
      <mn> 1 </mn>
      <mo> + </mo>
      <mfrac>
        <mrow>
          <mi> t </mi>
        </mrow>
        <mrow>
          <mi> n </mi>
        </mrow>
      </mfrac>
    </mrow>
  </mfrac>
  <mo> = </mo>
  <mfrac>
    <mrow>
      <msup>
        <mrow>
          <mi> e </mi>
        </mrow>
        <mrow>
          <mo> - </mo>
          <mi> r </mi>
          <mi> t </mi>
        </mrow>
      </msup>
    </mrow>
    <mrow>
      <mi> t </mi>
    </mrow>
  </mfrac>
  <munderover>
    <mrow>
      <mo> &#x220F;
        <! -- n-ary product -->
      </mo>
    </mrow>
    <mrow>
      <mi> n </mi>
      <mo> = </mo>
      <mn> 1 </mn>
    </mrow>
    <mrow>
      <mi> &#x221E;
        <! -- infinity -->
      </mi>
    </mrow>
  </munderover>
  <msup>
    <mrow>
      <mrow>
        <mo> ( </mo>
        <mn> 1 </mn>
        <mo> + </mo>
        <mfrac>
          <mrow>
            <mi> t </mi>
          </mrow>
          <mrow>
            <mi> n </mi>
          </mrow>
        </mfrac>
        <mo> ) </mo>
      </mrow>
    </mrow>
    <mrow>
      <mo> - </mo>
      <mn> 1 </mn>
    </mrow>
  </msup>
  <msup>
    <mrow>
      <mi> e </mi>
    </mrow>
    <mrow>
      <mfrac>
        <mrow>
          <mi> t </mi>
        </mrow>
        <mrow>
          <mi> n </mi>
        </mrow>
      </mfrac>
    </mrow>
  </msup>
</math>
Copy the code

Copy the above code to a local HTML file and open it in FireFox or Safari to see the effect. You can also set different CSS styles for each tag.

MathML code generation

As you can see from the example above, MathML is so complex that this single formula can take a day to write. But we can use itTools (click to visit)Automatically generate MathML code.

MathML element

The top element<math>

The top-level elements of MathML. Similar to in HTML.

<math>.</math>
Copy the code

Character/symbol element

• The
  
  element indicates that content should be rendered as an identifier, such as a function name, variable, or symbolic constant. You can also use any text in it to tag terms.
  

  <math>
    <mi> x </mi> <! -- x -->
    <mi> &pi; </mi>  <! - PI - >
  </math>
  Copy the code

• The
  
  element represents a numeric literal, which is usually a string of numbers with possible separators (dots or commas). However, it also allows you to include arbitrary text in it, which is actually a numeric quantity, such as “11”.
  

  <math>
    <mn> 1 </mn>
    <mn> 2e10 </mn>
  </math>
  Copy the code

• The
  
  element represents operations, including “operators” such as parentheses and separators such as commas and semicolons.
  

    <math>
      <mn> 5 </mn>
      <mo> + </mo>
      <mn> 5 </mn>
    </math>
  Copy the code

• The
  
  element represents string literals to be interpreted by programming languages and computer algebra systems. By default, string literals are enclosed in double quotation marks (“); Using the lQUOTE and rQUOTE properties, you can set custom characters to display. Note that quotation marks should not be specified unless they are part of the string literal. The content of the
  
  element itself is not an ASCII string, but a series of characters along with the
  
  and
  
  elements.
  
  
  
  

  <math>
    <ms lquote="„" rquote="" "> abc </ms> <! - „ ABC "-- >
  </math>
  Copy the code

• The
  
  element is used to represent a blank space, the size of which is determined by its attributes (width,height,depth).
  

  <math>
    <! -- depth: blank height below the baseline -->
    <! -- height: the blank height above the baseline
    <mspace depth="40px" height="20px" />
    <! --> < span style = "max-width: 100%; clear: both;
    <mspace width="100px" />
  </math>
  Copy the code

• The
  
  element is used to render arbitrary text without symbolic meaning, such as comments or annotations. To display symbolic text, use
  
  and
  
  .
  
  
  

  <math> 
    <mtext> Theorem of Pythagoras </mtext>  
    <mtext> /* comment here */ </mtext>
  </math>
  Copy the code

Common layout elements

• <menclosed>The element renders its content in a closed notation specified by the notation attribute. Support 17 different closed symbols, detailed viewThe document.

  <! -- Factorial -->
  <math> 
    <menclose notation="madruwb">
      <msup><mi>a</mi><mn>2</mn></msup>
      <mo>+</mo>
      <msup><mi>b</mi><mn>2</mn></msup>
    </menclose>
  </math>
  Copy the code

• <merror>The element is used to display content as an error message. In Firefox, this error message is rendered like a typical XML error message. Note that this error is not thrown when the MathML tag is incorrect or not well-formed XML. You still get an XML parsing error (in the case of MathML’s XHTML notation), which is associated with<merror>Has nothing to do.

  <math>
    <merror>
      <mrow>
        <mtext>Divide by zero:</mtext>
        <mfrac>
          <mn> 1 </mn>
          <mn> 0 </mn>
        </mfrac>
      </mrow>
    </merror>
  </math>
  Copy the code

• <mfrac>The element is used to display the score.

  <math>
    <mfrac> <! -- a / b -->
      <mi> a </mi>
      <mi> b </mi>
    </mfrac>
  </math>
  Copy the code

• <mphantom>Elements are rendered invisible, but dimensions (such as height, width, and baseline position) remain the same. Similar to CSSvisibility: hidden.

  <math>
    <mrow>
      <mi> x </mi>
      <mo> + </mo> 
      <mphantom> <! -- elements inside mphantom tag are not visible -->
        <mi> y </mi>
        <mo> + </mo>
      </mphantom>
      <mi> z </mi>
    </mrow>
  </math>
  Copy the code

• <mroot>The element is used to represent a radical with an explicit radical exponent. It takes two arguments, with the following syntax:<mroot> base index </mroot>.

  <math>
    <mroot>
      <mi>x</mi>
      <mn>3</mn>
     </mroot>
  </math>
  Copy the code

• <mrow>The element is used to group different subexpressions of consecutive multi-line expressions. A sliver expression usually counts as a single line and contains at least one or more operators and their operands (e.g<mi> 和 <mn>).
• <msqrt>The element is used to represent a square root (without showing the root exponent). It takes only one argument, with the syntax:<msqrt> base </msqrt>.

  <math>
    <msqrt>
      <mi>x</mi>
    </msqrt>
  </math>
  Copy the code

• <mstyle>Element changes the style of its child elements.

<math> 
  <mstyle displaystyle="true" mathcolor="teal">
    <mrow>
      <munderover>
        <mo stretchy="true" form="prefix">&sum;</mo>
        <mrow>
          <mi>i</mi>
          <mo form="infix">=</mo>
          <mn>1</mn>
        </mrow>
        <mi>n</mi>
      </munderover>
      <mstyle displaystyle="true">
        <mfrac>
          <mn>1</mn>          
          <mi>n</mi>
        </mfrac>
      </mstyle>
   </mrow>
  </mstyle>
</math>
Copy the code

Edge and corner elements

• <msub>The element is used to append the index to an expression as follows:<msub> base subscript </msub>.

  <math>
    <msub>
      <mi>X</mi>
      <mn>1</mn>
    </msub>
  </math>
  Copy the code

• <msubsup>The element is used to append both upper and lower subscripts to an expression. Its syntax is as follows:<msubsup> base subscript superscript </msubsup>

  <math displaystyle="true">   
    <msubsup>
      <mo> &#x222B;<! -- Integral symbol --> </mo>
      <mn> 0 </mn>
      <mn> 1 </mn>
    </msubsup>
  </math>
  Copy the code

• <msup>The element is used to label an expression.

  <math>
    <msup>
      <mi>X</mi>
      <mn>2</mn>
  </msup> 
  Copy the code

Form mathematics

< mtable >, < MTR >, < MTD > element is similar to HTML in the < table >, < tr > < td >.

<math>
  <mtable>
    <mtr>
      <mtd><mi>A</mi></mtd>
      <mtd><mi>B</mi></mtd>
      <mtd><mi>C</mi></mtd>
    </mtr>
  </mtable>
</math>
Copy the code

Mathematical symbols

Algebraic symbols

Calculus symbol

apostrophes

Function of symbols

Geometric symbols

The Greek letter

Invisible operator

Logic symbol

A collection of symbols

Browser compatibility

Compatibility Solution

1. MathJax.js

Mathjax.js is a mathematical formula rendering tool that converts MathML tags into HTML tags and adds specific CSS styles to them.

Add a line of code to the header of the page:

<html>
  <head>.<script src="http://fred-wang.github.io/mathjax.js/mpadded-min.js"></script>.</head>.</html>
Copy the code

What this js file does is determine if MathML is used in the document after the page is loaded. If it is used and the current browser is not compatible, load mathJax.js into the page and download the specific font file. The rendering is similar to FireFox’s native MathML-enabled browser, with the disadvantage of having to load a lot of files (9 files, or about 400KB) and being slow.

2. mathml.css

Mathml. CSS provides a simple adaptation. Again, if you are using MathML and the current browser is not compatible, you will load a simple CSS style sheet that does a simple simulation of the layout of the mathematical formula.

<html>
  <head>.<script src="http://fred-wang.github.io/mathml.css/mspace.js"></script>.</head>.</html>
Copy the code

The formula²Different effects of: