Math formulas in html

How to write mathematical formulas in HTML?

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

( x 2 + y 2 — 1 ) 3 — x 2 y 3 = 0 \left( x^+y^-1\right) ^-x^y^=0 ( x 2 + y 2 — 1 ) 3 — x 2 y 3 = 0

(xsup2/sup + ysup2/sup1)sup3/sup - xsup2/supysup3/sup = 0 Copy the code

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

f ( t ) = lim ⁡ n — up n ! n t t ( t + 1 ) . ( t + n ) = 1 t ∏ n = 1 up ( 1 + 1 n ) t 1 + t n = e — r t t ∏ n = 1 up ( 1 + t n ) — 1 e t n f\left( t\right) =\lim _\dfrac>=\dfrac\prod ^<\infty >_\dfrac<\left( 1+\dfrac\right) ^><1+\dfrac>=\dfrac>\prod ^<\infty >_\left( 1+\dfrac\right) ^e^<\dfrac> f ( t ) = lim n — up ​ t ( t + 1 ) . ( t + n ) n ! n t ​ = t 1 ​ ∏ n = 1 up ​ 1 + n t ​ ( 1 + n 1 ​ ) t ​ = t e — r t ​ ∏ n = 1 up ​ ( 1 + n t ​ ) — 1 e n t ​

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.

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

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

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

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

math ! -- depth: blank height below the baseline -- ! -- height: the blank height above the baseline mspace depth="40px" height="20px" / ! -- span style hljs-tag">mspace width="100px" / /math Copy the code

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" msupmia/mimn2/mn/msup mo+/mo msupmib/mimn2/mn/msup /menclose /math Copy the code

math merror mrow mtextDivide by zero:/mtext mfrac mn 1 /mn mn 0 /mn /mfrac /mrow /merror /math Copy the code

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

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

math mroot mix/mi mn3/mn /mroot /math Copy the code

math msqrt mix/mi /msqrt /math Copy the code

math mstyle displaystyle="true" mathcolor="teal" mrow munderover mo stretchy="true" form="prefix"sum;/mo mrow mii/mi mo form="infix"=/mo mn1/mn /mrow min/mi /munderover mstyle displaystyle="true" mfrac mn1/mn min/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 miX/mi mn1/mn /msub /math Copy the code

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

math msup miX/mi mn2/mn /msup Copy the code

Form mathematics

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

math mtable mtr mtdmiA/mi/mtd mtdmiB/mi/mtd mtdmiC/mi/mtd /mtr /mtable /math Copy the code

Mathematical symbols

Algebraic symbols

symbol	HTML character entity	Hex code
+	plus;	#x2B;	A plus sign
—	minus;	#x2212;	A minus sign
x	times;	#x00d7;	Multiplication sign
present	divide;	#x00f7;	devide
indicates	ne;	#x2260;	Sign of inequality
material	asymp;	#x2248;	Approximately equal to the
lt;	#x003c;	Less than
Or less	le;	#x2264;	Less than or equal to
gt;	#x003e;	Is greater than
p	ge;	#x2265;	Greater than or equal to
Plus or minus	plusmn;	#x00b1;	Plus or minus
∝	prop;	#x221d;	Is proportional to
∑	sum;	#x2211;	Summation operator
∏	prod;	#x220f;	Quadrature or direct product
⌊	lfloor;	#x230a;	Round down the left parenthesis
⌋	rfloor;	#x230b;	Round down the close parenthesis
⌈	lceil;	#x2308;	Round up the left parenthesis
⌉	rceil;	#x2309;	Round up the closing parenthesis

Calculus symbol

symbol	HTML character entity	Hex code
‘	prime;	#x2032;	Single quotation mark (first derivative)
«	Prime;	#x2033;	Double quotation marks (second derivative)
‴	tprime;	#x2034;	Triple quotation marks (third derivative)
partial	part;	#x2202;	Partial derivative
Delta t.	delta;	#x0394;	variational
∇	nabla;	#x2207;	Gradient operator
∫	int;	#x222b;	integral
∬	Int;	#x222c;	Double integral
∭	tint;	#x222d;	Triple integral
⨌	qint;	#x2a0c;	Four integrals
30	conint;	#x222e;	Curvilinear integral
∲	cwconint;	#x2232;	Clockwise curve integral
∳	awconint;	#x2233;	Counterclockwise integral
∯	Conint;	#x222f;	Surface integral
∰	Cconint;	#x2230;	Volume integral
up	infin;	#x221e;	infinity

apostrophes

symbol	HTML character entity	Hex code
.	hellip;	#x2026;	Horizontal ellipsis
⋮	vellip;	#x22ee;	Vertical ellipsis
.	ctdot;	#x22ef;	Center line horizontal ellipsis
⋰	utdot;	#x22f0;	Diagonal ellipsis
⋱	dtdot;	#x22f1;	Diagonal ellipsis

Function of symbols

symbol	HTML character entity	Hex code
⋅	sdot;	#x22c5;	The dot product
⨯	Cross;	#x2a2f;	Cross product
lots	Vert;	#x2016;
⟨	lang;	#x27e8;	The left Angle brackets
⟩	rang;	#x27e9;	Right Angle brackets
∘	compfn;	#x2218;	Composite function
—	rarr;	#x2192;	Function mapping
↦	mapsto;	#x21a6;	Concrete function mapping
ı	imath;	#x0131;	The letter I with no dots
ȷ	jmath;	#x0237;	The letter J without a dot

Geometric symbols

symbol	HTML character entity	Hex code
°	deg;	#x00b0;	degree
ang;	#x2220;	The Angle
∡	angmsd;	#x2221;	Measuring Angle
∟	angrt;	#x221f;	Right Angle
⦜	vangrt;	#x299c;	Right Angle
⊿	lrtri;	#x22bf;	Right triangle
a.	cir;	#x25cb;	round
delta	xutri;	#x25b3;	triangle
—	squ;	#x25a1;	square
▱	fltns;	#x25b1;	parallelogram
∥	spar;	#x2225;	parallel
∦	npar;	#x2226;	Not parallel
an	perp;	#x22a5;	vertical
≅	cong;	#x2245;	Are congruent
—	rarr;	#x2192;	ray
↔	harr;	#x2194;	A straight line
—	(n/a)	#x002d;	Line segment

The Greek letter

symbol	HTML character entity	Hex code
Alpha / Α	alpha; / Alpha;	#x03b1; / #x0391;
Beta / Β	beta; / Beta;	#x03b2; / #x0392;
Gamma / Γ	gamma; / Gamma;	#x03b3; / #x0393;
The delta / Δ	delta; / Delta;	#x03b4; / #x0394;
Epsilon / Ε	epsilon; / Epsilon;	#x03b5; / #x0395;
Zeta / Ζ	zeta; / Zeta;	#x03b6; / #x0396;
Eta / Η	eta; / Eta;	#x03b7; / #x0397;
Theta / Θ	theta; / Theta;	#x03b8; / #x0398;
ι / Ι	iota; / Iota;	#x03b9; / #x0399;
Kappa / Κ predominate	kappa; / Kappa;	#x03ba; / #x039a;
Lambda / Λ	lambda; / Lambda;	#x03bb; / #x039b;
Mu / Μ	mu; / Mu;	#x03bc; / #x039c;
The argument / Ν	nu; / Nu;	#x03bd; / #x039d;
Factor / Ξ	xi; / Xi;	#x03be; / #x039e;
western / Ο	omicron; / Omicron;	#x03bf; / #x039f;
PI / Π	pi; / Pi;	#x03c0; / #x03a0;
Rho / Ρ	rho; / Rho;	#x03c1; / #x03a1;
Sigma / Σ	sigma; / Sigma;	#x03c3; / #x03a3;
Tau / Τ	tau; / Tau;	#x03c4; / #x03a4;
Nu / Υ	upsilon; / Upsilon;	#x03c5; / #x03a5;
Phi / Φ	phi; / Phi;	#x03c6; / #x03a6;
χ / Χ	chi; / Chi;	#x03c7; / #x03a7;
Bits / Ψ	psi; / Psi;	#x03c8; / #x03a8;
Omega / Ω	omega; / Omega;	#x03c9; / #x03a9;

Invisible operator

symbol	HTML character entity	Hex code
⁡	af;	#x2061;	Used to specify functional applications
⁢	it;	#x2062;	Used to specify multiplication that is not visible
⁣	ic;	#x2063;	Use to specify invisible delimiters
⁤	(n/a)	#x2064;	Used to specify additions that are not visible

Logic symbol

symbol	HTML character entity	Hex code
such	not;	#x00ac;	non
Sunday afternoon	and;	#x2227;	with
∨	or;	#x2228;	or
⊻	veebar;	#x22bb;	Exclusive or
∀	forall;	#x2200;	Universal quantifier
∃	exist;	#x2203;	Existential quantifier
⇒	rArr;	#x21d2;	Material implication
As indicated by	hArr;	#x21d4;	Substantial equivalence
◻	EmptySmallSquare;	#x25fb;	necessary
◊	loz;	#x25ca;	may
⊢	vdash;	#x22a2;	inference
⊩	Vdash;	#x22a8;	contains
∵	because;	#x2235;	because
∴	there4;	#x2234;	so

A collection of symbols

symbol	HTML character entity	Hex code
∅	empty;	#x2205;	An empty set
∈	isin;	#x2208;	Belong to
∉	notin;	#x2209;	Do not belong to
⊆	sube;	#x2286;	Included in the
⊈	nsube;	#x2288;	Not included in
⊂	sub;	#x2282;	Proper subset
⊄	nsub;	#x2284;	The proper subset
⊇	supe;	#x2287;	superset
⊉	nsupe;	#x2289;	A superset
⊃	sup;	#x2283;	True superset
⊅	nsup;	#x2285;	Not really a superset
studying	cap;	#x2229;	intersection
∪	cup;	#x222a;	And set
∖	ssetmn;	#x2216;	complement

Browser compatibility

Compatibility Solution

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.

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 2 Different effects of:

Источник