By zhangxinxu from www.zhangxinxu.com/wordpress/?… This article can be reproduced in full, personal website without authorization, as long as the original author, source and link in the text can be retained, any website can be summary aggregation, commercial please contact authorization.

// ZXX: This article is better viewed in Firefox or Safari.

Introduction to MathML

MathML stands for “Mathematical Markup Language,” a subset of THE XML language used to display mathematical formulas on Web pages and even in some software.

In short, you use special HTML-like tags to display mathematical formulas on a web page.

Because some mathematical formulas are too complex for normal HTML to handle, such as this one:

What are the MathML tags? You can see the following list of definitions:

1. MathML presentation elements by category

Top-level element

<math>
Used in the outermost package to indicate that the inside are mathematical formulas. For example, just one variable
x, there are:

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

The effect is: x

Notation elements

<mglyph>
Some existing Unicode characters are not available and can be used at this point
<mglyph>Replacement display, which can be understood as picture elements in the MathML world, is supported
width.
heightAs well as
altSuch attributes. Such as:

<math>
  <mi><mglyph src="my-glyph.png" alt="my glyph"/></mi>
</math>Copy the code
<mi>
miMath Identifier abbreviation for ‘Math Identifier’ : a literal mathematical identifier, usually referring to a function name, variable, or symbolic constant. Scheming (there is no correlation between the following identifiers, only scheming semantics) :

<math> <mi> y </mi> <mi> Sin </mi> <mi Mathvariant ="monospace"> x </mi>Copy the code

The effect is y sine x π

<mn>
mnMath number = math number = math number = math number = math number Hint (hint only, no relation) :

< math.h > < mn > 0 < / mn > < mn > 1.337 < / mn > < mn > twelve < / mn > < mn > XVI < / mn > < mn > 2 e10 < / mn > < math.h >Copy the code

Effect: 0 1.337 twelve XVI 2E10

<mo>
mnShort for ‘Math Operators’, stands for mathematical operators such as addition, subtraction, multiplication, division, various parentheses, semicolons, etc. Hint:

<math> <mrow> <mn>5</mn> <mo>+</mo> <mn>5</mn> </mrow> <mrow> <mo> [ </mo> <mrow> <mn> 0 </mn> <mo> ;  </mo> <mn> 1 </mn> </mrow> <mo> ) </mo> </mrow> </math>Copy the code

The effect is: 5 + 5 [0; 1]

<ms>
msMath String literal, short for ‘Math String literal,’ represents a string literal that needs to be interpreted by programming languages and computer algebra systems. By default, string literals are enclosed in double quotation marks (
"); Through the use of
lquoteand
rquoteProperty that you can set custom characters to display. Hint:

< math.h > < ms lquote = "„ rquote =" "" "> ABC < / ms > < math.h >Copy the code

The effect is: ABC

<mspace>
mspaceMath Space, short for ‘Math Space’, stands for blank space, and its dimensions can be passed
width.
heightAs well as
depthEqual size control. Hint:

<math>
  <mi>x</mi>
  <mspace width="40px"></mspace>
  <mi>y</mi>
</math>Copy the code

The effect is: x, y

<mtext>
MathML
<mtext>The element is used to render arbitrary text without symbolic meaning, such as comments or annotations. Hint:

</mtext> </mtext> </mtext> </mtext>Copy the code

The overall layout

<menclose>
MathML
<menclose>The element is used to enclose content in the specified token (set)
notationProperties). To indicate a square root effect:

<math> 
  <menclose notation="radical">
     <msup><mi>a</mi><mn>2</mn></msup>
     <mo>+</mo>
     <msup><mi>b</mi><mn>2</mn></msup>
  </menclose>
</math>Copy the code

In supported browsers, such as Firefox, it looks like this:

The

element supports a wide range of enclose matches, in a wide variety of styles. It is an eye-opening document to see if you are interested in MDN.

<merror>
MathML
<merror>The element is used to indicate that the calculation or expression is wrong, as the browser will clearly distinguish it by the border and background color styles. Hint:

< merror > < mrow > < mtext > divided by 0: < / mtext > < mfrac > < mn > 1 < / mn > < mn > 0 < / mn > < / mfrac > < / mrow > < / merror > < math.h >Copy the code

The real-time effect of the current browser is divided by 0:1 0

The screenshot of Firefox looks like this:

<mfenced>
MathML
<maction>Elements can add custom symmetrical closing symbols (such as parentheses), as well as custom delimiters (such as commas). Hint:

<math> <mfenced open="{" close="}" separators=";; ,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math>Copy the code

The real-time effect of the current browser is as follows: A b C D E

In supported browsers it will appear like this:

<mfrac>
MathML
<mfrac>Refers to the
'math fraction', represents fractions, that is, division. Hint:

<math>  
  <mfrac bevelled="true">
     <mfrac>
        <mi> a </mi>
        <mi> b </mi>
     </mfrac>
     <mfrac>
        <mi> c </mi>
        <mi> d </mi>
     </mfrac>
  </mfrac>
</math>Copy the code

The real-time effect of the current browser is as follows: A b C D

In supported browsers it will appear like this:

<mpadded>
MathML
<mpadded>The < padding > element is used to add extra padding to the enclosed content to adjust position and size.
<mphantom>
The word Phantom means Phantom. So the MathML
<mphantom>Indicates that the current element is a “phantom”, that is, not visible, but its position and size remain, similar to the CSS world
visibility:hidden. Hint:

<math>
<mrow>
  <mi> x </mi>
  <mo> + </mo> 
  <mphantom>
    <mi> y </mi>
    <mo> + </mo>
  </mphantom>
  <mi> z </mi>
</mrow>
</math>Copy the code

The real-time effect of the current browser is x + Y + Z

In supported browsers it will appear like this:

<mroot>
MathML
<mroot>The element represents the square root. Hint:

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

The current browser real-time effect is: x 3

In supported browsers it will appear like this:

<mrow>
MathML
<mrow>The element is used to group subexpressions, which typically contain one or more operators and their respective operands (such as and). This element is rendered horizontally. Many of the above cases have been illustrated, and will not be repeated here.
<msqrt>
MathML
<msqrt>The element represents the square root. Hint:

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

The real-time effect of the current browser is x

<mstyle>
MathML
<mstyle>The element is used to change the style of its children. For example, set the color to tawny:

<math> 
  <mstyle displaystyle="true" mathcolor="teal">
    <mrow>
      <mi>i</mi>
      <mo form="infix">=</mo>
      <mn>1</mn>
    </mrow>
  </mstyle>
</math>Copy the code

In supported browsers it will appear like this:

Script and constraint elements

<mmultiscripts>
MathML
<mmultiscripts>The element allows you to create a tensor-like object. Tensor theory is a branch of mathematics that has important applications in mechanics. Tensor is a definition in some and some of the dual space vector space on the cartesian product of multilinear mapping, the coordinates is | | n dimensional space, there are n | | a volume of a component, where each component is a function of coordinates, and in coordinate transformation, these components also in accordance with certain rules for linear transformation.

This element is beyond my ability to understand, slip slip slip…

<mover>
MathML
<mover>The element is used to add stress or restrictions above an expression. Hint:

< math.h > < mover accent = "true" > < mrow > < mi > x < / mi > < mo > + < / mo > < mi > y < / mi > < mo > + < / mo > < mi > z < / mi > < / mrow > < mo > ⏞ <! </mo> </mover> </math>Copy the code

The real-time effect of the current browser is x + Y + z ⏞

In supported browsers it will appear like this:

<msub>
MathML
<msub>Easy to understand, subscript. Hint:

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

Current browser effect: X 1

<msubsup>
MathML
<msubsup>Element represents both superscript and subscript. Hint:

<math displaystyle="true"> <msubsup> <mo> ∫<! - integration -- > < / mo > < mn > 0 < / mn > < mn > 1 < / mn > < / msubsup > < / math >Copy the code

The real-time effect of the current browser is: ∫ 0 1

In supported browsers it will appear like this:

<msup>
MathML
<msup>For superscript, see subscript
<msub>
<munder>
MathML
<munder>Elements and
<mover>To emphasize or limit an expression. Hint:

< math.h > < munder accent = "true" > < mrow > < mi > x < / mi > < mo > + < / mo > < mi > y < / mi > < mo > + < / mo > < mi > z < / mi > < / mrow > < mo > ⏟ <! </mo> </munder> </math>Copy the code

The real-time effect of the current browser is x + Y + z ⏟

In supported browsers it will appear like this:

<munderover>
MathML
<munderover>Element means both above and below. Hint:

<math displaystyle="true"> <munderover > <mo> ∫ <! Integral --> </mo> <mn> 0 </mn> <mi> ∞ <! -- infinity --> </mi> </munderover>Copy the code

The real-time effect of the current browser is: ∫ 0 ∞

In supported browsers it will appear like this:

Form mathematics

<mlabeledtr>
MathML
<mlabeledtr>The element is used to represent the inline label label, either on the left or the right (as defined by
<mtable>On the element
sideAttribute determined).
<mlabeledtr>The child element of must be
<mtd>Elements. The first child node is the label label, while all the other child nodes represent the contents of the row and are associated with
<mtr>The children of the element are the same. According to my tests in Firefox, the first child node that should be a label label is not displayed.

<mtable>
MathML
<mtable>The element can be thought of as HTML
<table>Element, although the attributes differ greatly, but the layout behaves similarly.
<mtd>
MathML
<maction>The element can be thought of as HTML
<td>Element, which represents a cell, is similar in typography.
<mtr>
MathML
<maction>The element can be thought of as HTML
<tr>Element, representing table rows, which have a similar layout.

Unclassified element

<maction>
MathML
<maction>The element allows you to add interactive behaviors, such as displaying expressions and clicking to display the result of an expression evaluation. To indicate a 1+1=2 effect:

<math>
<maction actiontype="toggle">
  <mrow>
    <mn>1</mn>
    <mo>+</mo>
    <mn>1</mn>
  </mrow>
  <mrow>
    <mo>=</mo>
    <mn>2</mn>
  </mrow> 
</maction>
</math>Copy the code

GIF:

2. Semantic annotations

In MathML, there are two ways to mark mathematics: Presentation MathML is used to control the layout of a mathematical equation or expression, that is, how it looks to the user (described above), and Content MathML is used to make a mathematical equation or expression more semantic and easier for the computer to understand. The MathML elements

,

, and < annotation-XML > are used for joint presentation and content markup, as well as to provide layout information and semantics for mathematical expressions.

<annotation>
MathML
<annotation>Notes and instructions.
<annotation-xml>
MathML
<annotation-xml>Specifies a function or expression structure.
<semantics>
MathML
<semantics>Indicates that it contains semantic information.

The above three elements can be seen in the following case:

<math> <semantics> <! -- Presentation MathML --> <mrow> <msup> <mi>x</mi> <mn>2</mn> </msup> <mo>+</mo> <mi>y</mi> </mrow> <! -- Content MathML --> <annotation-xml encoding="MathML-Content"> <apply> <plus/> <apply> <power/> <ci>x</ci> <cn type="integer">2</cn> </apply> <ci>y</ci> </apply> </annotation-xml> <! <annotation encoding="image/ PNG "SRC ="some/path/formula. PNG "/> <! <annotation encoding="application/x-tex"> x^{2} + y </annotation> </semantics> </math>Copy the code

other

  • You can see they’re all labeled MathML and they’re all lettersmAt the beginning.
  • All of the MathML code shown above can be seen on this page, which you can click here: MathML Demo

Two, browser compatibility processing

First, compatibility. Chrome was briefly supported in version 24, but was soon removed, reportedly due to security concerns.

It is said that Internet Explorer can be installed with MathPlayer plugin support, but I personally feel that the final effect is not very good.

As for Chrome, I looked up a project called mathml.css: github.com/fred-wang/m…

The formula layout is simulated using CSS for unsupported browsers such as Chrome. This can be done by directly introducing the following JS code:

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

Mspace.js will check if the current browser supports MathML, and if not, it will load MathML. CSS files for compatibility, but only to a certain extent. Based on my actual usage, many tag and attribute functions are not supported. The resulting typography is not nearly as good as the original supported browsers, such as Firefox.

An introduction to online MathML generation tools

As you can see from the first paragraph, MathML is very complex and a complete XML language. There are a lot of XML attributes that have not been introduced yet.

Fortunately, there are tools available to generate MathML code directly. After some practice, found the following tool is excellent!

Handwriting formulas automatically change MathML

For example, IF I write x2+y2=z2 on the canvas, the result is MathML code in the upper right corner, which is really cool!

4. Minority languages will always be useful

For example, I have written a lot of animation related articles, such as parabolic motion, matrix transformation, etc., all need to use mathematical formulas. What if you get the beautiful formula code you want? After these days of study, I know how to play.

First, open the online MathML generation tool described above, write the math formula by hand, then display the generated MathML code in Firefox browser, and then take a screenshot.

If you hadn’t studied and studied MathML, you wouldn’t have known you could play this way, right?

Study, do not want utilitarian heart too strong, calculate at present cannot see benefit, but one day in the future, always bring to you the help like timely help.

Thanks for reading and welcome to exchange!

CSS World
Click to display the purchase code

// Want a tip? Click here. Got something to say? Click here.