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

Home broadband can also be wirelessly accessed. What are the benefits for IoT?

People are looking forward to a lower-priced broa...

Eight major IT disasters in 2024

Like most years, 2024 has seen a series of IT dis...

Connecting cloud, data and intelligence, Inspur Network aims to build a fully connected network based on business in 2018

[51CTO.com original article] On August 29, the tw...

5G Era Series: Battle of Big Companies

[[395527]] Nearly two years have passed since the...

Woman connected to WiFi and received a huge bill: Some WiFi is actually charged

Nowadays, surfing the Internet with mobile termin...

4G networks are getting slower and slower? This may be true, but there is absolutely no conspiracy!

Since the commercialization of 5G networks, the s...

Low Power Wide Area Network (LPWAN) Technology – Benefits and Testing Challenges

What is LPWAN? The Internet of Things (IoT) refer...

The Ministry of Industry and Information Technology released the "14th Five-Year Plan", and the information and communication industry's revenue will grow by 10% annually by 2025

On November 16, the Ministry of Industry and Info...

A Chinese original praised by five academicians: Feisuan fully automatic software engineering platform is launched globally

"You only need to input the flowchart, and t...

Edge computing is the driving force for enterprise IT transformation in the next decade

According to forecasts, the number of 5G subscrib...

12 principles to make data centers perform better

As American football star Tom Brady once said, &q...

OneTechCloud: 20% off on all VPS monthly payments starting from 22 yuan/month, Hong Kong CN2&CMI/US CN2 GIA&9929/High Defense optional

OneTechCloud (Yikeyun) offers a 20% discount code...

...

spinservers: 100M-1Gbps unlimited traffic servers starting from $118/month, Dallas/Silicon Valley data centers available

spinservers is a site under Majestic Hosting Solu...

Hosteons 5th Anniversary Double Traffic for All VPS Hosts, VPS Hosts Annual Payment of $16, 5 Data Centers in Los Angeles/Dallas

Hosteons is currently running a 5th anniversary p...