An article to help you understand HTML5 MathML

An article to help you understand HTML5 MathML

[[347913]]

HTML5 can use MathML elements in documents. The corresponding tags are ... .

MathML is Mathematical Markup Language, a markup language based on XML (a subset of Standard Generalized Markup Language) for writing mathematical symbols and formulas on the Internet.

Notice:

Most browsers support MathML tags. If your browser does not support this tag, you can use the latest version of Firefox or Safari to view it.

1. Simple MathML Example

The following is a simple MathML example.

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.         <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.  
  8.     <body style= "background-color: aqua;" > 
  9.  
  10.         <math xmlns= "http://www.w3.org/1998/Math/MathML" > 
  11.  
  12.  <mrow>
  13.  <msup>
  14.                     <mi>a</mi>
  15.                     <mn>2</mn>
  16.  </msup>
  17.  <mo>+</mo> 
  18.  
  19.  <msup>
  20.                     <mi>b</mi>
  21.                     <mn>2</mn>
  22.  </msup>
  23.  <mo>=</mo> 
  24.  
  25.  <msup>
  26.                     <mi>c</mi>
  27.                     <mn>2</mn>
  28.  </msup>
  29.  </mrow> 
  30.  
  31.  </math> 
  32.  
  33.  </body>
  34.  </html>

The running result graph is as follows:

2. Use as MathML Characters

Imagine the following is a markup used as the characters &InvisibleTimes;: XML/HTML Code Paste the contents into the clipboard.

The following example adds some operators:

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.       <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.      
  8.    <body style= "background-color: aqua;" > 
  9.      
  10.       <math xmlns= "http://www.w3.org/1998/Math/MathML" > 
  11.          
  12.  <mrow>
  13.  <mrow> 
  14.                  
  15.  <msup>
  16.  <mi>x</mi>
  17.  <mn>3</mn>
  18.  </msup> 
  19.                      
  20.  <mo>+</mo> 
  21.                      
  22.  <mrow>
  23.  <mn>4</mn>
  24.                   <mo>⁢</mo>
  25.  <mi>x</mi>
  26.  </mrow> 
  27.                      
  28.  <mo>+</mo>
  29.  <mn>6</mn> 
  30.                      
  31.  </mrow> 
  32.                  
  33.  <mo>=</mo>
  34.  <mn>0</mn> 
  35.                  
  36.  </mrow>
  37.  </math> 
  38.          
  39.  </body>
  40.  </html>

The running result graph is as follows:

3. MathML multiplication

<msgroup> is used to group rows within <mstack> elements and <mlongdiv> elements so that their positions are relative to the alignment of the stack. The <msgroup> element with the shift attribute can be used to create simple multiplication.

1. Usage

Following is the simple syntax to use this tag.

  1.  <msgroup> expression </msgroup>

2. Parameters

Here is a description of all parameters of this tag (expression - expression).

3. Attributes

position: Specifies the horizontal position of the row within the group relative to the position controlled by the containing msgroup (according to its position and offset properties). The default value is 0.

shift : Specifies the incremental shift of the positions of consecutive children (rows or groups) within the group. The default value is 0.

4. Case

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.         <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.  
  8.     <body style= "background-color: aqua;" >
  9.         <math xmlns= "http://www.w3.org/1998/Math/MathML" >
  10.  <mstack>
  11.  <msgroup>
  12.                     <mn>123</mn>
  13.  <msrow>
  14.                         <mo>×</mo>
  15.                         <mn>321</mn>
  16.  </msrow>
  17.  </msgroup>
  18.  <msline />
  19.                 <msgroup shift= "1" >
  20.                     <mn>123</mn>
  21.                     <mn>246</mn>
  22.                     <mn>369</mn>
  23.  </msgroup>
  24.  <msline />
  25.                 <mn>39483</mn>
  26.  </mstack>
  27.  </math>
  28.  </body>
  29.  </html>

4. Matrix expression

The following example may be used to indicate a relatively simple 2x2 matrix. XML/HTML CodeCopy contents to clipboard

The following example is a 2×2 matrix.

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.       <meta charset= "UTF-8" >
  5.  <title>Project</title>
  6.  </head> 
  7.      
  8.    <body style= "background-color: aqua;" >
  9.       <math xmlns= "http://www.w3.org/1998/Math/MathML" > 
  10.          
  11.  <mrow>
  12.  <mi>BAS</mi>
  13.  <mo>=</mo> 
  14.              
  15.             <mfenced open = "["   close = "]" > 
  16.              
  17.  <mtable>
  18.  <mtr>
  19.                      <mtd><mi>x</mi></mtd>
  20.                      <mtd><mi>y</mi></mtd>
  21.  </mtr> 
  22.                      
  23.  <mtr>
  24.                      <mtd><mi>z</mi></mtd>
  25.                      <mtd><mi>w</mi></mtd>
  26.  </mtr>
  27.  </mtable> 
  28.                
  29.  </mfenced>
  30.  </mrow>
  31.  </math> 
  32.        
  33.  </body>
  34.  </html>

The running result graph is as follows:

V. Conclusion

This article introduces the common usage of MathML based on HTML. In this article, it introduces how to use it as a MathML character, focusing on the practical application of MathML multiplication. Through the analysis of each case, its usage and properties are introduced. The display of the running effect diagram can help readers better understand.

Everyone is welcome to try actively. Sometimes it is easy to implement something when you see others do it, but when you try to implement it yourself, there will always be various problems. Don't be too ambitious and be diligent in doing it, so that you can understand it more deeply.

This article is reprinted from the WeChat public account "Front-end Advanced Learning Exchange", which can be followed through the following QR code. To reprint this article, please contact the front-end advanced learning exchange public account.

<<:  What HTTP status codes have you seen?

>>:  Design and implementation of Nodejs-Ipc

Recommend

The "tragic" situation of operators' operations

Previously, a joke mocking the operators caused a...

Comparison of Category 5/Category 5e/Category 6/Category 6e/Category 7 and other types of network cables

1. The difference between Category 5 and Category...

Guava RateLimiter: A practical guide to efficient flow control

background With the rapid development of the Inte...

In the Video 3.0 era, Huawei is working hard to promote video services to become a basic service for operators and achieve commercial success

[51CTO.com original article] In 2016, the three ma...

How to solve the problem that Ubuntu 18.04 cannot start normally after switching from XEN to KVM

There are fewer and fewer businesses that still u...

Several thinking patterns that need to be changed in the 6G era

First of all, 5/6G is born for the interconnectio...

Tingyun launches five major weapons to realize complete DEM functions first in the country

Historical data has shown that performance has a ...

AlphaVPS: 128GB-2TB large hard disk VPS annual payment starts from 15 euros

AlphaVPS is a Bulgarian hosting company registere...

9 classic cases, online teaching how to troubleshoot network failures

Network failure is the most common and difficult ...

The data center is dying? Not really

Today, despite the greater adoption and growth of...

CYUN: 20% off on all VPS, 50% off for old users, Hong Kong VPS monthly payment starts from 14.5 yuan

CYUN is a cloud computing service brand under Hon...

IMIDC server restock: Hong Kong & Taiwan starting from $39/month / Japan server starting from $49/month

IMIDC (Rainbow Network) Hong Kong, Taiwan and Jap...

An article to help you understand the HTML web page layout structure

[[404070]] Hello everyone, I am IT sharer, also k...

Prefabricated Data Centers – Winning Edge Data Centers

Speed ​​is critical for data. Data is being gener...

What is the difference between WiFi and Ethernet connections?

In today's networking world, Wifi and Etherne...